用CSS解决中英文混合字符串的截取省略问题的解决办法

最新推荐文章于 2021-02-20 18:30:39 发布

原创最新推荐文章于 2021-02-20 18:30:39 发布 · 127 阅读

CC 4.0 BY-SA版权

本文介绍了如何使用CSS属性处理长文本在固定宽度容器内的显示问题，通过设置text-overflow属性为ellipsis或clip来实现文本截断并附加省略号或直接隐藏。

在Div中的方法：

<DIV STYLE="width: 200px; border: 1px dashed red; overflow: hidden; text-overflow:ellipsis">
<NOBR>就是比如有一行文字，很长，表格内一行显示不下.</NOBR>
<NOBR>就a是比如有一行文字，很长，表格内一行显示不下.</NOBR>
<NOBR>就1是比如有一行文字，很长，表格内一行显示不下.</NOBR>
<NOBR>就F是比如有一行文字，很长，表格内一行显示不下.</NOBR>
<NOBR>就是 Like You Pig Very Very Very Much.</NOBR>
</DIV>

在Table中的方法：

<TABLE style="table-layout:fixed;border-collapse:collapse;font-size:12px;" border="1" width="200" bordercolor=#666666>
<TR>
<TD nowrap style="overflow:hidden;text-overflow:ellipsis;">内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容</TD>
</TR>
</TABLE>
代码很简单，基本上应该很容易就可以看明白，主要在于“text-overflow”这个属性，此属性有2个值，分别是“ellipsis”和“clip”，简单的理解，第一个值会在截取之后在文字末端加上省略号，第二个值则不会。
详细出处参考：http://www.jb51.net/article/7269.htm