表格布局：固定使用文本溢出：省略号和第二个文本显示答案

【问题标题】：table-layout:fixed use text-overflow:ellipse and a second text showing表格布局：固定使用文本溢出：省略号和第二个文本显示
【发布时间】：2012-11-22 18:44:58
【问题描述】：

我对 css 很陌生，我已经花了好几个小时来寻找解决这个问题的方法。我在可调整大小的容器中有一个固定的布局表。我有一个调整大小的列，它有 2 个文本，第一个应该做一个 text-overflow:ellipse 而第二个应该总是显示（如果可能的话）。要求是不显示表格单元格中的所有文本（如果不合适），但显示最后 5 个字母。我想我把 2 个跨度放在一个 td 中，并给第二个跨度一个宽度，但宽度被忽略了。当我尝试浮动元素时（我只能向左浮动，因为向右浮动会将最后 5 个字母放在一个带有少量文本的长列的末尾，这是不行的），向左，但是第一个 div 没有得到更小，因此不应用 text-overflow:ellipse。

例如，当 td 很短时我需要：

|Hello budd...ight?|

和

|Hello buddy ho...ight?|

但是当 td 很长时：

|Hello buddy how is it going tonight?                       |

这似乎是一个相当普遍的要求，那么我该如何实现呢？我不想要任何 javascript，我很确定它可以通过 css 解决，也许还有一些额外的 div...

我的html：

<table style="table-layout:fixed">
<colgroup>
    <col/>
    <col width="200px"/>
</colgroup>
<tr>
    <td>
        <span class="first">Hello buddy how is it going ton</span>
        <span class="second">ight?</span>
    </td>
    <td></td>
</tr>
</table>

我的CSS：

table
{
     width: 90%;
     margin: 10px;   
}

tr
{
    height: 100px;
}
td
{
    width: 50%;   
    border: 1px solid blue;
    padding: 5px;
    height: 100px;
    vertical-align: top;
    position: relative;
    while-space:nowrap;
}

span.first {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  border: 1px solid red;   

}
span.second
{
    border: 1px solid green;
}

任何想法如何实现这一目标？非常感谢任何帮助。谢谢

【问题讨论】：

文字总是单行，还是在某些情况下会变成多行？
有人吗？不可能那么难！！！拜托了！！！
我想出了几种方法，如果 TD 是文本的大小或更小，这些方法都可以使用......但如果 TD 比文本宽，则没有任何效果。 ://

标签： css tablelayout

【解决方案1】：

看起来我是able to get something working...这是更改后的 CSS：

span.first {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
/* --- everything below this line is new --- */
    float: left;
    padding-right: 5ex;
    max-width: 100%;
    display: inline-block;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
span.second
{
    width: 4ex;
    margin-left: -5ex;
    display: inline-block;
}

兼容于：
我没有测试过 Opera 或 IEIE introduced box-sizing with IE8）

解释：

.first

float: left; 与 display: inline-block; 组合时让两个跨度使用同一行
padding-right: 5ex; 为最后五个字符腾出空间（适用于 MOST 字体）
max-width: 100%; 让第一个跨度增大到（但不超过）TD
display: inline-block; 的宽度需要有效地使用 max-width
box-sizing: border-box; 将填充放在内容区域 (max-width) 使用前缀，因为 Firefox 不支持没有前缀的变体。

.秒

width: 4ex; 因为如果你在下面使用5ex 会变得很麻烦
margin-left: -5ex; 会使.second 侧向到.first 的文本区域的边缘

注意：您可以更改 ex 值以满足您的需要，但请确保两者都
margin-left== -(@987654348 @)
width<=padding-right- 0.5

【讨论】：