css `hyphens` 自动换行无法换行子字符串

Question

我最近从 overflow-wrap 切换到 hyphens 以在行间打断文本。但是，我遇到了一个情况，似乎无法将某个子字符串之前的任何单词连字。我不知道为什么会这样。

观察下面的gif，要显示的完整字符串是/people/type:astronauts/name-gregory-chamitoff/profile但是当宽度小于子字符串中单词的210px none时/people/type:astronauts/name- 曾经连字符并推到下一行。但是，只要 210px 连字符就可以正常工作。几乎就像是把这个子串当作一个连续的词。

.test {
  font-size: 20px;
  width: 210px;
  /* adding this works but defeats the use of hyphens
  overflow-wrap: break-word;
  */
  hyphens: auto;
  overflow: hidden;
  background-color: white;
}

html {
  background-color: black;
}

<div class="test">/people/type:astronauts/name-gregory-chamitoff/profile</div>

我发现唯一能解决这个问题的方法是使用类似下面的东西作为包罗万象。然而，这很好，它不会优先考虑断字而不是断开单词。我正在寻找除此以外的其他解决方案，使 hyphens 适用于所有或大多数字符串，甚至是这种情况！

.test {
  overflow-wrap: break-word;
  word-wrap: break-word;
  word-break: break-all;
  word-break: break-word;
  hyphens: auto;
}

Answer 1

不知道是不是你要找的：

.test {
    hyphens: auto;
    color:white;
  }
  html {
    background-color: black;
  }

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
</head>
<body >
    <div class="test">/people/type:&shyastronauts/&shyname-gregory-chamitoff/profile here i have another words</div>
</body>
</html>

Answer 2

正如 @Salman A 所指出的，相当多的字符（例如斜杠或冒号、下划线等）未被识别为正确的 word/syllable 关节.像“chamitoff/profile”这样的字符串将被视为一个长复合词“chamitoffprofile”。

当谈到像字符串这样的 URL 时，您不想溢出 – 您仍然可以使用 word-break: break-word;

这样的东西更好

说到 css hyphens 属性：它的能力仍然是 'limited'（至少在 2021 年）。例如。 Chrome 在版本 88 中引入了对此功能的支持（根据 caniuse）。

这是一个可调整大小的片段：

*{
box-sizing:border-box;
}

body{
font-family: 'Segoe UI';
font-size: calc(1.75vw + 1.75vh / 2);
padding: 10px;
}

.resizable{
  width: 20ch;
  height: 10em;
  hyphens: auto;
  resize:both;
  overflow:auto;
  padding-right:1em;
  border: 1px solid #ccc
}

.resizable p{
  hyphens: auto;
}

.break-words{
  hyphens: none;
  word-break: break-word;
}

 <h2>Example</h2>
 <div class="resizable">
    <p>people/type:astronauts/name-gregory-chamitoff/profile <br /><strong>Original</strong></p>
    <p>peopletype:astronautsname-gregory-chamitoffprofile <br /><strong>Dash replaced by hyphens</strong></p>
    <p>peopletype_astronautsname_gregory_chamitoff_profile <br /><strong>Dash replaced by underscores</strong></p>
    <p>peopletype astronautsname-gregory-chamitoffprofile <br /><strong>Dash and colons replaced by hyphens</strong></p>
    <p>peopletype astronauts name gregory chamitoff profile <br /><strong>Dash replaced by spaces</strong></p>
    <p class="break-words">people/type:astronauts/name-gregory-chamitoff/profile <br /><strong>Dash replaced by spaces</strong></p>
   </div>

<h2>URLs</h2>
   <div class="resizable">
       <p><a href="#">https://www.maybeweshouldhaveoptedfor ashorterdomain.com/contact/specialinterest?product_id=1234567878</a> <br /><strong>URL – "hyphenated"</strong></p>

      <p class="break-words"><a href="#">https://www.maybeweshouldhaveoptedfor ashorterdomain.com/contact/specialinterest?product_id=1234567878</a> <br /><strong>URL – word-break</strong></p>
      <p class="break-words"><a href="#">contact@maybeweshouldhaveoptedfor ashorterdomain.com</a> <br /><strong>Email example</strong></p>
  </div>

除非 browsers/css-implementations 广泛支持改进的断字概念，如 hyphenate-limit-chars（...以前存在）或断字例外规则，否则你应该真正抑制你的热情。

结论
（2021 年——希望接下来几年我们会有所改进）
您仍然必须在不完美的 'brute-force' 方法（例如分词）之间做出选择——至少可以防止不希望的溢出和一个不详尽的（...非常有礼貌）css 基于连字符 property/feature，它仍然缺少任何强制性的细粒度控制。

css `hyphens` 自动换行无法换行子字符串

Word wrap with css `hyphens` fails to wrap substring

css

word-wrap

css-hyphens