文字 字母以及數字的換行不換行問題總結

2021-07-27 19:37:23 字數 425 閱讀 1391

實現頁面的文字、字母的展示效果的時候,相信大家都會遇到過一些這樣的要求:「文字不能換行,要強制文字一行展示」或者是「字母不會自動換行,需要實現可以自動換行斷句」等等諸如此類的要求,現在就這個文字、字母換不換行的問題,說說這三個css屬性的巧妙運用:white-space、word-wrap、word-break

(1)white-space:屬性設定如何處理元素的空白;

(3)word-break(css3的新增屬性):規定自動換行的處理方法;

接下來,就是這幾個屬性的組合運用讓我們可以在處理文字和字母的換行問題上得心應手

(1)要求強制不換行:p

一般的運用:要求文字等不換行且超出範圍省略號顯示 p

(2)自動換行:p

(3)特殊的,針對字母以及數字的換行問題:pp

注:此時需要把元素設定為塊級元素才能看得到效果

英文本元和漢字自動換行和不換行的設定

一 英文換行 div p 只對英文起作用,以字母作為換行依據 div p 只對英文起作用,以單詞作為換行依據 注意 有的時候英文單詞是乙個整體不能拆開!若不同瀏覽器將超出部分隱藏,可以新增 overflow auto 二 中文換行以及強制不換行 div p 只對中文起作用,強制換行 div p 強制...

前端隨筆 html中文字不換行的處理方法

前言 在html中,連續的數字和字母,以及字母和數字的組合是不會自動換行的。如果想要設定自動換行,可以應用樣式 word wrap break word 1.有時,我們在前端,需要設計類似於這樣的訊息框,會限定訊息框的 width 和 height 但是,如果當我們的訊息內容為數字或者字母的時候,就...

css html保留文字中的空格以及換行

1 pre wrap 保留空白符,但是正常地進行換行 white space pre wrap2 pre 空白會被瀏覽器保留。其行為方式類似 html 中的標籤。該屬性不會換行 white space pre 3 pre line 合併空白符,但是保留換行符。white space pre line...