css文字超出自动显示省略号

Posted 2020-06-29 kbeer

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了css文字超出自动显示省略号相关的知识，希望对你有一定的参考价值。

只针对单行文本有效；

01.针对块状元素

ul li{
	width: 180px;
	text-overflow: ellipsis;
	white-space: nowrap;/*禁止自动换行*/
	overflow: hidden;
}

css文字超出自动显示省略号显示省略号
css文字超出自动显示省略号
css文字超出自动显示省略号显示省略号

02.针对table

table{
	table-layout:fixed;
}
table td{
	word-break:keep-all;/* 不换行 */
	white-space:nowrap;/* 不换行 */
	overflow:hidden;/* 内容超出宽度时隐藏超出部分的内容 */
	text-overflow:ellipsis;/* 当对象内文本溢出时显示省略标记(...) ；需与overflow:hidden;一起使用。*/
}

时间	地点	事件
2013/12/19	和讯信息技术有限公司上海分公司	css文字超出自动显示省略号

以上是关于css文字超出自动显示省略号的主要内容，如果未能解决你的问题，请参考以下文章

css怎样让HTML中超出的内容显示为省略号

div内文字显示两行，超出两行部分省略号显示css能实现么？