css中标题显示不完用省略号代替的方法
时间:2022-07-22 08:18 浏览:280 类型:技术知识
在布局时经常会遇到显示不完用省略号代替的案例,如果使用text-overflow和white-space就可解决这个问题,并且是响应式的,根据视窗大小来动态文字个数。
关键字: text-overflow:ellipsis
语法:text-overflow : clip | ellipsis
取值:
clip :默认值 。不显示省略标记(...),而是简单的裁切.
ellipsis: 当对象内文本溢出时显示省略标记(...).
注意:overflow: hidden; text-overflow:ellipsis;white-space:nowrap;一定要一起用
1.一定要给容器定义宽度.
2.如果少了overflow: hidden;文字会横向撑到容易的外面
3.如果少了white-space:nowrap;文字会把容器的高度往下撑;即使你定义了高度,省略号也不会出现,多余的文字会被裁切掉
4.如果少了text-overflow:ellipsis;多余的文字会被裁切掉,就相当于你这样定义text-overflow:clip.
5.如果容器是table,当文字内容过多时,不换行,而是出现...
6.一定要给table定义table-layout:fixed;只有定义了表格的布局算法为fixed,下面td的定义才能起作用。