div或table内容超出宽度时隐藏并显示省略标记
有了这个方法,不再因为截取字符串时编码问题而烦恼了,O(∩_∩)O~
Html代码
table-layout:fixed;/* 只有定义了表格的布局算法为fixed,下面td的定义才能起作用。 */
word-break:keep-all; /* 不换行 */
white-space:nowrap; /* 不换行 */
overflow:hidden; /* 内容超出宽度时隐藏超出部分的内容 */
text-overflow:ellipsis;/* 当对象内文本溢出时显示省略标记(...) ;需与overflow:hidden;一起使用。*/
<div style="table-layout:fixed;word-break:keep-all;white-space:nowrap;overflow:hidden; text-overflow:ellipsis; 100px; "> 显示显示显示显示显示显示显示显示显示显示显示显示显示显示显示显示显示显示显示显示显示显示显示显示显示显示显示显示显示显示显示显示显示 </div>
本文转载自谈笑涧《用css来实现把过长的字符串替换为省略号》