0

我最近从 切换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;
}
<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;
}
4

2 回答 2

2

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

当涉及到像字符串这样的 URL 时，你不想溢出——你最好还是用类似的东西word-break: break-word;

说到 CSShyphens属性：它的功能仍然“有限”（至少在 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>

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

结论
（2021 年——希望明年我们会看到改进）
你仍然必须在不完美的“蛮力”方法之间做出选择，比如断词——至少可以防止不希望的溢出和不加思索的方法（......非常有礼貌）基于 CSS 的连字符属性/功能仍然缺少任何强制性的细粒度控件。

于 2021-11-12T01:29:16.420 回答
0

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

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

于 2021-11-08T08:03:19.113 回答