第一种方法:“溢出省略号”,即当文字超出一定宽度时,将其省略,并显示“...”。
p { overflow: hidden; /* 将超出部分隐藏 */ text-overflow: ellipsis; /* 显示省略号 */ white-space: nowrap; /* 禁止换行 */ }
第二种方法:使用“分行显示”,即当文字超出一定宽度时,将其自动换行,并在每行后面添加“...”。 p { display: -webkit-box; /* 将p标签变成弹性盒子 */ -webkit-line-clamp: 3; /* 最多显示3行 */ -webkit-box-orient: vertical; /* 垂直排列 */ overflow: hidden; /* 超出部分隐藏 */ text-overflow: ellipsis; /* 显示省略号 */ }
第三种方法:使用“滚动显示”,即当文字超出一定宽度时,将其放在一个容器内,并添加滚动条。 p { overflow: auto; /* 添加滚动条 */ }
参考于:https://www.yzktw.com.cn/post/1035961.html
标签:文字,显示,省略号,即当,超出,webkit,overflow,方法,css From: https://www.cnblogs.com/fuyao/p/17695312.html