有时候会有溢出文本省略,然后显示三个点的要求。
需要注意:
1、一定要给容器设置 宽度。
2、容器不能是flex布局,需要改为 block 或者 inline-block。
单行文本时,只需要给元素设置下面属性(需要先设置容器宽度):
1 overflow: hidden; 2 text-overflow: ellipsis; 3 white-space: nowrap;
多行文本显示时:
1 overflow: hidden; 2 text-overflow: ellipsis; 3 /* 仅仅使用于 webkit内核 */ 4 display: -webkit-box; 5 -webkit-line-clamp:2; /* 要显示的行数 */ 6 -webkit-box-orient:vertical;
或者利用元素模拟:
1 .box3{ 2 display: inline-block; 3 height: 40px; 4 800px; 5 line-height: 20px; 6 overflow: hidden; 7 position: relative; 8 } 9 .box3 .span{ 10 margin-left: 20px; 11 position: absolute; 12 right: 0; 13 bottom: 0; 14 }
或者利用一张图片模拟,利用绝对定位定位到右下角。