2

我对 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;
}

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

4

1 回答 1

1

看起来我能够得到一些工作......这是更改后的 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 或 IE<9 （虽然我可以保证 IE7 不会运行它，因为 MDN 声明IE 引入了 IE8）铬合金 火狐 IE9
box-sizing

解释：

。第一的

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== -(padding-right)
width<=padding-right- 0.5

于 2012-12-07T19:00:56.860 回答