跳至內容
Astera Technology

長網址或檔名換行,字元仍要完整

180px 內顯示連續識別碼,靠換行讀完,不用省略號或裁字。

完整字串在 180px 框內換行。

下載完整個案資料及參考答案 ↓

先看這個例子

段落放了一個固定、沒有空格的識別碼。overflow-wrap:anywhere 提供必要換行機會,原本字串不變。

輸入與瀏覽器原生結果
情況輸入或查看方法結果與意思
文字內容比較換行前後原文識別碼原文完全相同
框闊度量度段落180px
溢出比較 scrollWidth 和 clientWidth正例字串沒有水平溢出
下載可編輯 CSV ↓

瀏覽器怎樣處理

緊急換行只改斷行機會,不改資料。字串本來沒有可換行位置時,這種處理尤其有用。省略號和裁切是另一種呈現取捨,會隱去部分可見內容。精確行數仍受字款量度影響。

一般換行不會拆開本例字串

反例闊度不變,改回一般換行。

反例原始碼,請另開例子核對
<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 雖然完整,畫面結尾卻被裁掉,閱讀工作算通過嗎?

查看參考答案

不算。資料保留和畫面可讀要分開核對;須能讀到全部字元。

  • 原文、溢出及多行呈現都要查。
  • 不要假定各引擎行數完全相同。

原始例子檔案

相關資源