Question

我对css很新，而且我已经搜索了几个小时来解决这个问题。我在可调整大小的容器中有一个固定的布局表。我有一个调整大小的列，有2个文本，第一个应该执行文本溢出：椭圆，而第二个应该始终显示（如果可能）。要求是不显示表格单元格中的所有文本，如果它不适合，但显示最后5个字母。我认为在td中放置2个跨度，并给第二个宽度，但宽度被忽略。当我试图浮动元素时（我只能向左浮动，导致右移将最后5个字母放在一个带有少量文本的长列的末尾，这是不行的），左，但是然后第一个div没有得到较小，因此文本溢出：椭圆未应用。

例如，当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;
}

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

Answer 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;
}

兼容：Chrome http://www.w3schools.com/images/compatible_chrome.gif Firefox http://www.w3schools.com/images/compatible_firefox.gif IE9 http://www.w3schools.com/images/compatible_ie.gif
我没有测试Opera或IE＆lt; 9（虽然我几乎可以保证IE7不会运行它，因为MDN声明IE introduced box-sizing with IE8）

说明：

。首先

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

table-layout：fixed use text-overflow：省略号和第二个文本显示

1 个答案:

。首先

。第二