CSS text over flow为什么不能正常工作

Question

我希望标题中的文字用省略号缩短。但它不是整个地址显示在一行

<table border="0" style="font-weight:normal; position: absolute; top:45; left: 0;">      
    <th align="left" style="" width="10%">
         <span style=" overflow: hidden; text-overflow: ellipsis; white-space: nowrap; width:10px; font-weight:normal; white;" 
                onclick="dropdownResize()"><i>Address</i> &nbsp; <b>${bean.address}</b></span>
    </th>
     <tr >
      <td style=" border-style:solid; border-width:0px; text-transform:capitalize; text-indent:1px;">
    </br>
    <br>Usual address <br><b>${bean.address}</b></br> <br> 
    </td>       
     </tr>
</table>

Answer 1

您使用的是<span>，默认情况下它是内联元素，无法像块级元素那样接收宽度，高度等。

要更改此设置，请使用div或将display: block;添加到span的样式。

Answer 2

你的代码有很多错误，

首先，您正在使用<b> <i>以及使用<table>来布置您的内容（这是一种不好的做法）并且您正在使用{{1其中甚至不是真正的标签 - 您正在寻找的标签是<br> </br> - 它是一个自我结束标签，因为它永远不会包含任何参数或内容。

您选择使用的<br/>代码不支持<span>参数，因为它们只包含其中包含的文本，因此我将其更改为width并将所有<div>和<b>代码更改为附加了CSS <i>的{​​{1}}代码。

我在这里修改了你的编码：

Live Demo

至于你的桌面布局，我建议你阅读其中的一些内容：

http://shouldiusetablesforlayout.com/

http://www.hotdesign.com/seybold/

http://webdesign.about.com/od/layout/a/aa111102a.htm

http://www.htmlgoodies.com/beyond/css/article.php/3642151/CSS-Layouts-Without-Tables.htm

接下来，支持：

FF4不支持通过hack在FF3.6中使用的<span>，有关详细信息，请参阅此处：

text-overflow:ellipsis in Firefox 4? (and FF5)

Answer 3

尝试将display:block添加到span代码上的样式。

Answer 4

请务必在支持的浏览器中对其进行测试： http://www.quirksmode.org/css/textoverflow.html

Firefox不支持省略号。