CSS Text 之 word-break

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

内容简介：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 一共支援三種設定值： 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 隔開，都視為一個 單字

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

查看所有标签

猜你喜欢:

CSS Text 之 word-break

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

码农书籍

Fortran95程序设计

彭国伦 / 中国电力出版社 / 2002-9 / 59.00元

本书介绍了当前国际上广泛流行的高级算法语言Fortran的全新版本Fortran 95。本书循序渐进、由浅到深，使用结构化及面向对象程序设计观念，以简捷明了的方式把Fortran 95介绍给读者。书中主要讲述了Fortran 95程序设计的方法，包括数值计算、计算机绘图、窗口程序设计、与Visual C/Visual Basic/Delphi的链接、甚至是游戏程序的编写。本书语言简洁，实......一起来看看《Fortran95程序设计》这本书的介绍吧!

码农工具