先看這個例子
段落放了一個固定、沒有空格的識別碼。overflow-wrap:anywhere 提供必要換行機會,原本字串不變。
| 情況 | 輸入或查看方法 | 結果與意思 |
|---|---|---|
| 文字內容 | 比較換行前後原文 | 識別碼原文完全相同 |
| 框闊度 | 量度段落 | 180px |
| 溢出 | 比較 scrollWidth 和 clientWidth | 正例字串沒有水平溢出 |
瀏覽器怎樣處理
緊急換行只改斷行機會,不改資料。字串本來沒有可換行位置時,這種處理尤其有用。省略號和裁切是另一種呈現取捨,會隱去部分可見內容。精確行數仍受字款量度影響。
一般換行不會拆開本例字串
反例闊度不變,改回一般換行。
<style>body{margin:8px}</style>
<style>.token{width:180px;overflow-wrap:normal}</style><p class="token">workshop_local_example_identifier_without_spaces</p>本例 scrollWidth 大於 clientWidth。再加 overflow:hidden 只會藏起結尾,不會令全文可讀。
試着修正
textContent 雖然完整,畫面結尾卻被裁掉,閱讀工作算通過嗎?
查看參考答案
不算。資料保留和畫面可讀要分開核對;須能讀到全部字元。
- 原文、溢出及多行呈現都要查。
- 不要假定各引擎行數完全相同。