談談white-space和word-wrap

時間 2019-11-09

標籤談談 white space word wrap 欄目 Microsoft Office 简体版

原文原文鏈接

有兩個CSS屬性我一直在混淆着其意義，今天一併整理掉。html

white-space和word-wrap一般用來解決以下問題：segmentfault

字符串太長，但又不想讓其換行，強制其在一行中（如顯示代碼），如何實現?
單詞太長，但若是不折行的話會溢出，我但願它能多行顯示。
爲何我明明打了10個空格，可顯示出來的只有一個?
爲何我明明敲了10個回車，瀏覽器卻徹底不顯示?

white-space

white-space能夠取以下的值：瀏覽器

normal | nowrap | pre | pre-wrap | pre-line

關於解釋，看圖比較直接。spa

如下截圖均由以下代碼模板獲得：code

<body>
  <div style="white-space: {{value}};">hello                    world


  my name


    is ssnau, i am living in the beauuuuuutiful hangzhou city
  </div>
</body>

注：segmentfault會在正文壓縮圖片，點擊圖片可看原圖)orm

word-wrap

word-wrap能取以下值：htm

normal | break-word

如下兩個示例抄自MDN（https://developer.mozilla.org/en-US/docs/Web/CSS/word-wrap）圖片

normal: 單詞超長也不可折行，產生溢出:ci

p { width: 13em; background: gold; }

效果：
字符串

break-word: 單詞超長會折行:

p { width: 13em; background: gold; word-wrap: break-word; }

效果：

總結

white-space是做用於空格和回車上的，用於控制：

空格是否合併
回車是否解釋成折行
句子太長是否在有空格處折行

而word-wrap是做用在單詞上，用於控制超長單詞是否折行。

注意white-space有一堆pre開頭的值，pre究竟是什麼意思呢？
一般嘛pre是prefix的縮寫，不過這可解釋不通啊。在html裏也有一個<pre>的標籤，它們之間有什麼聯繫呢?
其實它們都是preserve（保留）的縮寫啦。因而咱們能夠這麼理解：

pre: 保留(preserve)全部的空格和回車，且不容許折行。（把折行也當作是一種非preserve）
pre-wrap: 保留(preserve)全部的空格和回車，可是容許折行(wrap)。
pre-line: 僅僅保留(preserve)回車(line)，會合並空格，且容許折行

而<pre>正是默認有以下CSS的元素：

pre {
    display: block;
    white-space: pre;
}

篇首的幾個問題，就當是習題好了。

1. 談談 ServletConfig 和 ServletContext
2. 談談json和jsonp
3. 談談Spanner和F1
4. 【談談IO】BIO、NIO和AIO
5. 談談GC和引用
6. 談談產品和項目
7. JavaScript: 談談let和const
8. 談一談copy_from_user和copy_to_user
9. 隨筆-談談docker和redis
10. 談談 Vue 模板和 JSX
更多相關文章...
• PHP wordwrap() 函數 - PHP參考手冊
• XLink 和 XPointer 語法 - XLink 和 XPointer 教程
• 漫談MySQL的鎖機制
• Docker容器實戰(八) - 漫談 Kubernetes 的本質

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。