CSS中有時需要顯示一些較長的代碼片段或者語句,如果直接在頁面上顯示,可能會影響布局和美觀。這時候可以使用CSS的多行顯示并且超出部分隱藏的功能。以下是代碼段的CSS樣式:
.example { font-size: 16px; white-space: pre-wrap; background-color: #f5f5f5; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 5; // 顯示的行數 -webkit-box-orient: vertical; }
上面的代碼實現了以下功能:
- 將文本換行處理。
- 給背景色和邊距。
- 隱藏多余內容。
- 增加省略號以便在內容過多時做出提示。
- 強制將元素顯示在多行。
- 限制最大行數為5行。
- 在縱向方向上堅定該元素在容器中的位置。
通過這樣設置,代碼就可以在容器中顯示多行,如果內容過多,就會被隱藏并以省略號顯示,鼠標懸浮顯示完整內容。這種方法適用于顯示代碼段或一些長的文本內容,能夠使頁面顯得具有更好的可讀性及可維護性。