CSS文字超出寬度---換行總結

糖~豆豆發表於2024-10-19
CSS

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body {
padding: 20px;
}

.parent {
width: 100px;
}


.child1 {
#a1cef5;
line-height: 30px;
padding: 20px;
}

.bgc_blue {
background-color: #a1cef5;
}

.bgc_purple {
background-color: #dca1f5;
}

.my_usually {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}

.my_usually1 {
white-space: nowrap;
overflow: hidden;
}


/* 強制不換行 */
.nowrap {
white-space: nowrap;
}

/* 允許單詞內斷句，首先會嘗試挪到下一行，看看下一行的寬度夠不夠，不夠的話就進行單詞內的斷句 */
.breakword {
word-wrap: break-word;
}

/* 斷句時，不會把長單詞挪到下一行，而是直接進行單詞內的斷句 */
.breakAll {
word-break: break-all;
}

/* 超出部分顯示省略號 */
.ellipsis {
text-overflow: ellipsis;
overflow: hidden;
}
</style>
</head>

<body>

<h1>使用樣式控制字型換行下</h1>
<div class="my_usually"> </div>
<div class="parent">
<h2 class="nowrap">第1種：white-space: nowrap; overflow: hidden; text-overflow: ellipsis;</h2>
<p class="my_usually bgc_blue">white-space: nowrap; ---overflow: hidden; text-overflow: ellipsis;</p>

<h2 class="nowrap">第2種：white-space: nowrap; overflow: hidden; </h2>
<p class="my_usually1 bgc_blue">white-space: nowrap; ---overflow: hidden; </p>

<h2 class="nowrap">第3種：white-space: nowrap; </h2>
<p class="nowrap bgc_purple">white-space: nowrap;----absavhsafhuafdfbjhfvsalguvfaihuivfs</p>

<h2 class="nowrap">第4種：word-wrap: break-word; </h2>
<p class="breakword bgc_blue">word-wrap: break-word;----absavhsafhuafdfbjhfvsalguvfaihui</p>
<h2 class="nowrap">第5種：word-break: break-all; </h2>
<p class="breakAll bgc_purple">word-break: break-all;----absavhsafhuafdfbjhfvsalguvfaihuivf</p>
<h2 class="nowrap">第6種：wordwrap:breakword; </h2>
<p class="normal bgc_blue">wordwrap:breakword;----absavhsafhuafdfbjhfvsalguvfaihuivfsa</p>
<h2 class="nowrap">第7種：text-overflow: ellipsis; overflow: hidden; </h2>
<p class="ellipsis bgc_purple">text-overflow: ellipsis; overflow:
hidden;----absavhsafhuafdfbjhfvsalguvfaihuivfsab</p>
</div>


<h1 class="my_h1">非使用樣式控制字型換行下</h1>
<div class="parent">
<h3>漢字文字</h3>
<div class="child1">普通情況普通情況下普通情況下普通情況下普通情況下普通情況下下</div>
<h3>純數字</h3>
<div class="child1">2222222222222222222222222222222222222222</div>
<h3>數字加文字加其他</h3>
<div class="child1">33333333333333333333普通情況3333333普通情況333333333333333333333333333333</div>
<h3>特殊符號加文字加其他</h3>
<div class="child1">————————————______普通情況3333333普通情況333333333333333333333333333333</div>
</div>
</body>

</html>

多行文字自動換行居中--實測好用的很OK

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .outDiv {
      border: 1px solid black;
      width: 200px;
      height: 200px;
      text-align: center;
      overflow: hidden;
    }

    .outDiv .innerDiv1 {
      display: inline-block;
      vertical-align: middle;
    }

    .outDiv .innerDiv-fix {
      display: inline-block;
      width: 0;
      height: 100%;
      line-height: 100%;
      vertical-align: middle;
      visibility: hidden;
    }
  </style>
</head>

<body>
  <div class="outDiv">
    <span class="innerDiv1">多行文字自動多行文字自動換行居中多行文字自動換行居中多行文字自動換行居中多行文字自動換行居中換行居中</span><span class="innerDiv-fix"><!-- 此標籤不能換行 --></span>
  </div>
</body>

</html>

2021-5-5之前總結

以下轉載自https://www.cnblogs.com/dtdxrk/

word-break:break-all單詞截斷自動換行
word-break:break-all 例如div寬200px，它的內容就會到200px自動換行，如果該行末端有個英文單詞很長（congratulation等），它會把單詞截斷，變成該行末端為conra(congratulation的前端部分)，下一行為tulation（conguatulation）的後端部分了。

支援版本：IE5以上 該行為與亞洲語言的 normal 相同。也允許非亞洲語言文字行的任意字內斷開。該值適合包含一些非亞洲文字的亞洲文字。

語法：word-break : normal | break-all | keep-all

normal : 依照亞洲語言和非亞洲語言的文字規則，允許在字內換行

break-all : 該行為與亞洲語言的normal相同。也允許非亞洲語言文字行的任意字內斷開。該值適合包含一些非亞洲文字的亞洲文字

keep-all : 與所有非亞洲語言的normal相同。對於中文，韓文，日文，不允許字斷開。適合包含少量亞洲文字的非亞洲文字

word-wrap:break-word單詞不截斷自動換行
word-wrap:break-word 例子與上面一樣，但區別就是它會把congratulation整個單詞看成一個整體，如果該行末端寬度不夠顯示整個單詞，它會自動把整個單詞放到下一行，而不會把單詞截斷掉的。

支援版本：IE5.5以上 內容將在邊界內換行。如果需要，詞內換行( word-break )也將發生。表格自動換行，避免撐開。

語法： word-wrap : normal | break-word

normal : 允許內容頂開指定的容器邊界

break-word : 內容將在邊界內換行。如果需要，詞內換行（word-break）也行發生說明：設定或檢索噹噹前行超過指定容器的邊界時是否斷開轉行。

CSS強制性換行
一般情況下，元素擁有預設的

white-space:normal 自動換行

PS：不換行是white-space:nowrap

當錄入的文字超過定義的寬度後會自動換行，但當錄入的資料是一堆沒有空格的字元或字母或數字（常規資料應該不會有吧，但有些測試人員是會這樣子做的），超過容器寬度時就會把容器撐大，不換行。

解決方法（以IE，chrome,FF為測試瀏覽器）：

{

word-break:break-all; /支援IE，chrome，FF不支援/

word-wrap:break-word;/支援IE，chrome，FF/

}

建議：word-break 用3C檢測會顯示問題的，導致百度快照也會出問題-這個屬性OPERA FIREFOX 瀏覽器也不支援 word-break屬性可以用white-space:normal;來代替，這樣在FireFox和IE下就都能正確換行，而且要注意，單詞間的空格不能用 來代替，不然不能正確換行。

text-overflow省略號…樣式語法結構
text-overflow語法：
text-overflow : clip | ellipsis

clip : 　不顯示省略標記（…），而是簡單的裁切
ellipsis : 　當物件內文字溢位時顯示省略標記（…）

display:block;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
————————————

相關文章