最近在做網頁時，對乙個 p 元素進行測試，出現了下面這種情況。
p 元素明明完全在白色框內部， p 元素中的文字卻跑到了外面。百思不得其解。
經過查詢，終於明白這種情況與 css 的換行設定有關。瀏覽器預設的換行方式是在單詞斷點處換行，而像上面這樣一連串的字元會被瀏覽器認定為乙個單詞，所以不會換行。這種情況下可以設定 p 的 css 屬性為 word-break: break-all; 這樣乙個單詞過長時就可以換行了。word-break 還有另一種設定 keep-all ，只在半形空格或連字元處換行。經過設定溢位內容開始正常顯示。
文字內容溢位
display webkit box webkit line clamp n webkit box orient vertical overflow hidden text overflow ellipsis 使用text overflow ellipsis對溢位文字顯示省略號有兩個好處，一是不用通...
bootstrap中的段落和強調內容
段落是排版中另乙個重要元素之一。在bootstrap中為文字設定了乙個全域性的文字樣式 這裡所說的文字是指正文文字 1 全域性文字字型大小為14px font size 2 行高為1.42857143 line height 大約是20px 大家看到一串的小數或許會有疑惑，其實他是通過less編譯器...
CSS解決內容溢位
word break keep all 不換行 white space nowrap 不換行 overflow hidden 內容超出寬度時隱藏超出部分的內容 text overflow ellipsis 當物件內文字溢位時顯示省略標記 需與overflow hidden 一起使用。乙個塊級元素中有...