内容简介：WebStorm 2019.1.3Safari 12.1.1
word-break 專門針對文字換行處理，但中英文處理不太一樣。
Version
WebStorm 2019.1.3
Safari 12.1.1
CSS 3
Safari
word-break 一共支援三種設定值： normal 、 break-all 與 keep-all 。
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h2>word-break: normal</h2>
<div class="general normal">
This is a long and
Honorificabilitudinitatibus califragilisticexpialidocious Taumatawhakatangihangakoauauotamateaturipukakapikimaungahoronukupokaiwhenuakitanatahu
實務上常需要對所回傳的字串加工如先增加再增加這牽涉到增加與兩種該如何優雅實現呢
</div>
<h2>word-break: break-all</h2>
<div class="general break-all">
This is a long and
Honorificabilitudinitatibus califragilisticexpialidocious Taumatawhakatangihangakoauauotamateaturipukakapikimaungahoronukupokaiwhenuakitanatahu
實務上常需要對所回傳的字串加工如先增加再增加這牽涉到增加與兩種該如何優雅實現呢
</div>
<h2>word-break: keep-all</h2>
<div class="general keep-all">
This is a long and
Honorificabilitudinitatibus califragilisticexpialidocious Taumatawhakatangihangakoauauotamateaturipukakapikimaungahoronukupokaiwhenuakitanatahu
實務上常需要對所回傳的字串加工如先增加再增加這牽涉到增加與兩種該如何優雅實現呢
</div>
</body>
</html>
三段文字都一樣，英文包含較長的單字，以 space 隔開，但中文是連續的。
CSS
style.css
.general {
font-size: 20px;
}
.normal {
word-break: normal;
}
.break-all {
word-break: break-all;
}
.keep-all {
word-break: keep-all;
}
word-break: normal
- Default value
-
英文換行時會維持單字完整性，若單字過長，可能造成行尾沒有對齊 -
中文不受限制，一行寬度到了就換行
word-break: break-all
-
英文與中文均不受限制，一行寬度結束就強制換行
word-break: keep-all
-
英文與中文都會維持單字完整性，若單字過長，可能造成行尾沒有對齊 -
中文由於沒有 space 隔開，都視為一個單字
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持 码农网
猜你喜欢:
本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。
GUI设计禁忌2.0
Jeff Johnson / 盛海艳 等 / 机械工业出版社 / 2008 / 49.00元
本书描述软件开发人员在设计图形用户界面（GUI）时经常犯的“禁忌”，并提出避免这些错误的基本原则和理论依据。本书将GUI禁忌分为7种类型：GUI控件禁忌、导航禁忌、文字禁忌、图形设计和布局禁忌、交互禁忌、响应性禁忌以及管理禁忌，并分别进行详述。 本书编排独特，条理清晰，针对性极强，是不可多得的GUI设计优秀资源。本书适合软件开发人员、web站点设计人员、开发经理、用户界面设计人员等阅读。一起来看看 《GUI设计禁忌2.0》 这本书的介绍吧!
