文字多行溢位顯示 之最後一行不到行尾的解決

2021-09-13 02:05:55 字數 910 閱讀 3935

多行文字溢位,但是最後一行木有到結尾,如下圖這種例子

解決**示例

html:

元素的「格式化首行」可能會存在於相同流下的塊級子元素上元素的「格式化首行」可能會存在於相同流下的塊級子元素上。元素的「格式化首行」可能會存在於相同流下的塊級子元素上元素的「格式化首行」可能會存在於相同流下的塊級子元素上元素的「格式化首行」可能會存在於相同流下的塊級子元素上。元素的「格式化首行」可能會存在於相同流下的塊級子元素上元素的「格式化首行」可能會存在於相同流下的塊級子元素上元素的「格式化首行」可能會存在於相同流下的塊級子元素上元素的「格式化首行」可能會存在於相同流下的塊級子元素上能會存在於相同流下的塊級子元素上。元素的「格式化首行」可能會存在於相同流下的塊級子元素上元素的「格式化首行」可能會存在於相同流下的塊級子元素上元素的「格式化首行」可能會存在於相同流下的塊級子元素上元素的「格式化首行」可能會存在於相同流下的塊級子元素上

...更多詳情

css:

* 

.model_content

.model_text

.model_detail

.more_detail

效果:

總結:將...拼在後面,寬度以em(基於父元素font-size)為單位,相當於遮住底下的文字內容而模擬這種效果,以em為單位的目的是防止遮住字不是整數個,希望以整字倍數為寬。

還有其他方法麼?

HTML多行文字溢位控制最後一行顯示省略號樣式

text overflow具有三個值。乙個是clip,修剪文字。第二個就是今天的主角ellipsis,顯示省略符號來代表被修剪的文字。第三個是string,使用給定的字串來代表被修剪的文字,不過一般都不使用這個值。clip的值 white space nowrap width 200px overf...

文字只顯示一行或多行

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

flex布局,最後一行靠左顯示

flex布局,最後一行靠左顯示 最後一行靠左顯示 設定為伸縮盒子 display flex 設定主軸方向 flex direction row 豎立顯示 flex direction column flex direction row reverse flex direction column re...