CSS換行不換行

2021-09-26 05:20:39 字數 773 閱讀 9397

段落文字不超出幾行,超出部分以省略號顯示

一、div內顯示一行,超出部分用省略號顯示

white-space: nowrap;

overflow: hidden;

text-overflow: ellipsis;

二、div內顯示兩行或三行,超出部分用省略號顯示

overflow: hidden;

text-overflow: ellipsis;

display: -webkit-box;

-webkit-line-clamp: 2;(行數)

-webkit-box-orient: vertical;

概述

-webkit-line-clamp 是乙個 不規範的屬性(unsupported webkit property),它沒有出現在 css 規範草案中。限制在乙個塊元素顯示的文字的行數。 為了實現該效果,它需要組合其他外來的webkit屬性。常見結合屬性: display: -webkit-box; 必須結合的屬性 ,將物件作為彈性伸縮盒子模型顯示 。 -webkit-box-orient 必須結合的屬性 ,設定或檢索伸縮盒物件的子元素的排列方式 。 text-overflow,可以用來多行文字的情況下,用省略號「…」隱藏超出範圍的文字 。

強制換行符號(br)換行

可以使用標籤p來實現大換行,如果在乙個文章裡需要分段換行形式。

使用css設定寬度自動換行

連續數字或者字母換行word-wrap:break-word ;

CSS換行不換行

段落文字不超出幾行,超出部分以省略號顯示 一 div內顯示一行,超出部分用省略號顯示 white space nowrap overflow hidden text overflow ellipsis 二 div內顯示兩行或三行,超出部分用省略號顯示 overflow hidden text ove...

CSS設定不換行與強制換行 CSS換行

css設定不轉行 overflow hidden 隱藏 white space normal 預設 pre 換行和其他空白字元都將受到保護 nowrap 強制在同一行內顯示所有文字,直到文字結束或者遭遇 br 物件 設定強行換行 word break normal 依照亞洲語言和非亞洲語言的文字規則...

css實現強制不換行 自動換行 強制換行

強制不換行 div自動換行 div強制英文單詞斷行 divcss設定不轉行 overflow hidden 隱藏 white space normal 預設 pre 換行和其他空白字元都將受到保護 nowrap 強制在同一行內顯示所有文字,直到文字結束或者遭遇 br 物件 設定強行換行 word b...