CSS Text 之 word-break

栏目: CSS · 发布时间: 6年前

内容简介:WebStorm 2019.1.3Safari 12.1.1

word-break 專門針對文字換行處理,但中英文處理不太一樣。

Version

WebStorm 2019.1.3

Safari 12.1.1

CSS 3

Safari

CSS Text 之 word-break

word-break 一共支援三種設定值: normalbreak-allkeep-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 隔開,都視為一個 單字

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

世界因你不同

世界因你不同

李开复、范海涛 / 中信出版社 / 2009-9 / 29.80元

这是李开复唯一的一本自传,字里行间,是岁月流逝中沉淀下来的宝贵的人生智慧和职场经验。捣蛋的“小皇帝”,11岁的“留学生”,奥巴马的大学同学,26岁的副教授,33岁的苹果副总裁,谷歌中国的创始人,他有着太多传奇的经历,为了他,两家最大的IT公司对簿公堂。而他的每一次人生选择,都是一次成功的自我超越。 透过这本自传,李开复真诚讲述了他鲜为人知的成长史、风雨兼程的成功史和烛照人生的心灵史,也首次全......一起来看看 《世界因你不同》 这本书的介绍吧!

HTML 压缩/解压工具
HTML 压缩/解压工具

在线压缩/解压 HTML 代码

JS 压缩/解压工具
JS 压缩/解压工具

在线压缩/解压 JS 代码

Markdown 在线编辑器
Markdown 在线编辑器

Markdown 在线编辑器