带有 css `hyphens` 的自动换行无法换行子字符串答案

【问题标题】：Word wrap with css `hyphens` fails to wrap substring带有 css `hyphens` 的自动换行无法换行子字符串
【发布时间】：2021-11-12 09:51:17
【问题描述】：

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

观察下面的 gif，要显示的完整字符串是 /people/type:astronauts/name-gregory-chamitoff/profile，但是当宽度小于大约 210px 时，子字符串 /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;
}

&lt;div class="test"&gt;/people/type:astronauts/name-gregory-chamitoff/profile&lt;/div&gt;

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

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

【问题讨论】：

不幸的是，规范没有定义断字规则，因此没有正确和不正确行为的定义。浏览器似乎认为/people/type:astronauts/name 和chamitoff/profile 是牢不可破的，您无法更改它。
似乎提供软休息机会是目前唯一的选择。您可以在 DAO 层或服务器端将 / 替换为 /&shy;。
@onkarruikar 这对我来说是一个很好的解决方案。谢谢！
我猜 <wbr> 在你的情况下甚至比 &shy; 更好：stackoverflow.com/a/41599344/6263942

标签： css word-wrap css-hyphens

【解决方案1】：

正如 @Salman A 所指出的，很多字符（例如，斜杠或冒号、取消划线等）未被识别为正确的单词/音节连接。像“chamitoff/profile”这样的字符串将被视为一个长复合词“chamitoffprofile”。

当涉及到字符串之类的 URL 时，您不想溢出 - 最好还是使用 word-break: break-word; 之类的东西

说到 css hyphens 属性：它的功能仍然“有限”（至少在 2021 年）。例如。 Chrome 已在 88 版中引入了对此功能的支持（根据 caniuse）。

这是一个可调整大小的 sn-p：

*{
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>

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

结论
（2021 年——希望未来几年我们会看到改进）
您仍然必须在不完美的“蛮力”方法（如断字）之间做出选择——至少可以防止不希望的溢出以及一个基于 css 的连字符属性/功能，它仍然缺少任何强制性的细粒度控件。

【讨论】：

curb your enthusiasm ? 感谢您的回复！

【解决方案2】：

我不确定它是否是你要找的东西：

.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>

【讨论】：

谢谢，但不，我想要一个仅使用 hyphens 的解决方案。如说明中所述，此方法不优先考虑断字。