css中文字太多显示方法

第一种方法：“溢出省略号”，即当文字超出一定宽度时，将其省略，并显示“...”。
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;  /* 添加滚动条 */
}

第四种方法： 文字太多自动换行
在css中加上：
white-space: pre-wrap;

 

 

参考于：https://www.yzktw.com.cn/post/1035961.html