是否有任何使用纯HTML和CSS截断文本的好方法,以便动态内容可以适应固定宽度和高度的布局？
我已经截断由服务器端的逻辑宽度(即一个盲目猜测的字符数),但由于一个"W"是比更宽的"i"这倾向于是次优的,并且还需要我重新猜测(并保持调整)每个固定宽度的字符数.理想情况下,截断将在浏览器中发生,浏览器知道渲染文本的物理宽度.
我发现IE有一个text-overflow: ellipsis属性正是我想要的,但我需要这个是跨浏览器.这个属性似乎(有些？)标准但Firefox不支持.我发现各种 解决方法基础上overflow: hidden,但他们要么不显示省略号(我希望用户知道的内容被截断),或显示这一切的时候(即使内容没有截断).
有没有人有一个很好的方法来适应固定布局中的动态文本,或者是服务器端截断的逻辑宽度和我现在要获得的一样好？
我有一个表格单元格,我总是希望它是一个特定的宽度.但是,它不适用于大字符串的非空格文本.这是一个测试用例:
td {
border: solid green 1px;
width: 200px;
overflow: hidden;
}<table>
<tbody>
<tr>
<td>
This_is_a_terrible_example_of_thinking_outside_the_box.
</td>
</tr>
</tbody>
</table>如何在框的边缘切除文本,而不是让框展开？
我有一个HTML表格,如下所示:
-------------------------------------------------
|Column 1 |Column 2 |
-------------------------------------------------
|this is the text in column |this is the column |
|one which wraps |two test |
-------------------------------------------------
但我希望它隐藏溢出.这里的原因是文本包含更多细节的链接,并且"包装"在我的布局中浪费了大量空间.它应该是这样的(不增加列或表的宽度,因为它们将离开屏幕/否则创建一个水平滚动条):
-------------------------------------------------
|Column 1 |Column 2 |
-------------------------------------------------
|this is the text in column |this is the column |
-------------------------------------------------
我已经尝试了很多不同的CSS技术来试图解决这个问题,但我无法让它变得正确.Mootables是我发现的唯一这样做:http://joomlicious.com/mootable/ ,但我无法弄清楚他们是如何做到的.有谁知道如何使用我自己的表使用CSS和/或Javascript,或者Mootables如何做到这一点？
示例HTML:
<html><body>
<table width="300px">
<tr>
<td>Column 1</td><td>Column 2</td>
</tr>
<tr>
<td>this is the text in column one which wraps</td>
<td>this is the column two test</td>
</tr>
</table></body></html>