文字只顯示一行,和文字只顯示兩行的問題

2022-03-11 23:37:50 字數 1090 閱讀 6917

在我們設定樣式的時候,不可避免的涉及到內容只出現一行或只出現自己想要的行數。

1.首先說一行的問題。

如果內容超出,還會看到現在的內容嗎?噠噠噠噠噠

.outer

詳解:overflow:hidden;這個就不用多說了,超出的部分隱藏。還可以用於清除浮動(不建議使用)。

text-overflow:ellipsis;超出的部分用...來顯示

white-space:nowrap;這個東東曾經讓我很迷糊。對此我專門進行了一番修煉。

white-space

首先先看一下菜鳥教程裡面的講解

大家可能會迷糊,什麼是空白??空白也就是我們在編譯器裡面打出的空格,或者縮排,總之就是沒有內容的部分。

我們乙個個舉栗子!

以下面的文字結構作為例子

white-space:normal;顯示的就是預設樣式

white-space: pre;這個不僅不換行,還會把空白的部分顯示在頁面中。頭很鐵!

white-space:nowrap;不會換行,但是沒有空白部分。

剩下的就不一一實驗了。大家可以試一下看看效果。

一行顯示的結果將會是這樣的。

2.如果想要顯示兩行怎麼辦?

還是用上面的文字內容

文字只顯示一行或多行

1 文字只顯示一行,文字溢位部分用省略號顯示 截至1月15日09時,全國累計報告確診病例98290例,現有確診病例1727例,境外輸入4474例 海外現有確診病例26094556例。疫情影響了很多行業的發展,更影響到我們生活的很多方面,所以大家都是希望疫情能夠早點結束了。div 2 文字只顯示3行,...

android listview 只顯示一行

今天碰到乙個很詭異的問題 listview裡面的adapter有4行資料,可是在頁面上無論如何只能顯示list.get 0 的資料,其他三項無法顯示。原來,android在layout布局檔案的開頭裡面,有一行這個東西 android layout width fill parent android...

CSS控制文字只顯示一行,超出部分顯示省略號

white space text overflow ellipsis 之前使用過這個例子,現在總結說明一下 先給貼 style width 300px overflow hidden white space nowrap text overflow ellipsis 省略我吧!省略我吧!省略我吧!省...