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