當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

css实现文字占两行

發布時間：2024/1/18 编程问答 37 豆豆

生活随笔收集整理的這篇文章主要介紹了 css实现文字占两行小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

text-overflow:?-o-ellipsis-lastline;overflow:?hidden;text-overflow:?ellipsis;display:?-webkit-box;-webkit-line-clamp:?2;line-clamp:?2;-webkit-box-orient:?vertical;

未使用之前

<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>* {margin: 0;padding: 0;}body {display: flex;justify-content: center;align-items: center;height: 100vh;}.father {width: 200px;border: 1px solid burlywood;}</style> </head><body><div class="father">這是測試文字這是測試文字這是測試文字這是測試文字這是測試文字這是測試文字這是測試文字這是測試文字這是測試文字</div> </body></html>

?使用之后

<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>* {margin: 0;padding: 0;}body {display: flex;justify-content: center;align-items: center;height: 100vh;}.father {width: 200px;border: 1px solid burlywood;}.two {text-overflow: -o-ellipsis-lastline;overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 2;line-clamp: 2;-webkit-box-orient: vertical;}</style> </head><body><div class="father two">這是測試文字這是測試文字這是測試文字這是測試文字這是測試文字這是測試文字這是測試文字這是測試文字這是測試文字</div> </body></html>

總結

以上是生活随笔為你收集整理的css实现文字占两行的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。