前端 單行文字溢位省略與多行文字溢位省略

2022-09-01 20:45:11 字數 818 閱讀 7106

.text-ellipsis
示例:

效果:

.multiline-ellipsis
示例:

慶曆四年春,滕子京謫守巴陵郡。越明年,政通人和,百廢具興,乃重修岳陽樓,增其舊制,刻唐賢今人詩賦於其上,屬予作文以記之。

予觀夫巴陵勝狀,在洞庭一湖。銜遠山,吞長江,浩浩湯湯,橫無際涯,朝暉夕陰,氣象萬千,此則岳陽樓之大觀也,前人之述備矣。然則北通巫峽,南極瀟湘,遷客騷人,多會於此,覽物之情,得無異乎?

若夫淫雨霏霏,連月不開,陰風怒號,濁浪排空,日星隱曜,山岳潛形,商旅不行,檣傾楫摧,薄暮冥冥,虎嘯猿啼。登斯樓也,則有去國懷鄉,憂讒畏譏,滿目蕭然,感極而悲者矣。

至若春和景明,波瀾不驚,上下天光,一碧萬頃,沙鷗翔集,錦鱗游泳,岸芷汀蘭,鬱鬱青青。而或長煙一空,皓月千里,浮光躍金,靜影沉璧,漁歌互答,此樂何極!登斯樓也,則有心曠神怡,寵辱偕忘,把酒臨風,其喜洋洋者矣。

嗟夫!予嘗求古仁人之心,或異二者之為,何哉?不以物喜,不以己悲,居廟堂之高則憂其民,處江湖之遠則憂其君。是進亦憂,退亦憂。然則何時而樂耶?其必曰「先天下之憂而憂,後天下之樂而樂」乎!噫!微斯人,吾誰與歸?

時六年九月十五日。

效果:

CSS中多行文字溢位省略

overflow hidden 超出的文字隱藏 text overflow ellipsis 溢位用省略號顯示 white space nowrap 溢位不換行,只能顯示一行 這個只是用適用於單行文字溢位情況,之前處理多行文字的話需要js來支援。display webkit box 將物件作為彈性伸...

css 實現單行 多行文字溢位省略號顯示

單行實現 css部分 overflow hidden text overflow ellipsis white space nowrap white space 設定如何處理元素內的空白 值為nowrap 文字不會換行,文字會在同一行上繼續,直到遇到 標籤為止。效果如下 多行實現 css部分 dis...

CSS 實現單行 多行文字溢位,省略號顯示

實現 overflow hidden text overflow ellipsis white space nowrap 示例 divstyle head 單行文字溢位,省略號顯示 div body 效果圖 實現 display webkit box webkit box orient vertic...