断字，如果连字符[重复]答案

【问题标题】：Word-break, if hyphened [duplicate]断字，如果连字符[重复]
【发布时间】：2020-10-07 03:13:17
【问题描述】：

我试图通过使用display: inline-block 在我的.threadTitle 中避免断字。这可行，但是当在两个字母之间添加 连字符 时，无论如何都会导致中断。

word-break: keep-all 和 display: inline-block 都没有预期的效果。

  .threadTitle {
    position: relative;
    display: inline-block;
    word-break: keep-all;  
    flex: 1 1 0;
    overflow: hidden;
  }

【问题讨论】：

标签： html css

【解决方案1】：

这主要是一个 Unicode 问题，而不是 HTML 问题。您需要使用不间断的连字符（‑，U+2011）而不是普通的连字符：

<p>This-is-a-really-long-sentence-separated-by-breaking-hyphens-that-will-be-split-among-various-lines.</p>
<p>This&#8209;is&#8209;a&#8209;really&#8209;long&#8209;sentence&#8209;separated&#8209;by&#8209;non&#8209;breaking&#8209;hyphens&#8209;that&#8209;won't&#8209;be&#8209;split&#8209;among&#8209;various&#8209;lines.</p>

这对于确保连字符不会在两行之间中断非常有用。

如果您根本不想包装，请使用white-space: nowrap;，正如Ori Drori's answer 建议的那样。

p {
  white-space: nowrap;
}

&lt;p&gt;This is a really long sentence separated by breaking (normal) spaces that won't be split among various lines because &lt;code&gt;white-space: nowrap;&lt;/code&gt; is being used.&lt;/p&gt;

【讨论】：

赞成。我想这是一个非常好的解决方案，但是 white-space: nowrap; 让我免于每次格式化它。

【解决方案2】：

使用white-space: nowrap; 防止文本换行：

.threadTitle {
  position: relative;
  display: inline-block;
  white-space: nowrap;
  flex: 1 1 0;
  overflow: hidden;
}

&lt;h1 class="threadTitle"&gt;Thread-Titleeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee&lt;/h1&gt;

【讨论】：

谢谢，网上没找到这个楼盘，我是在找word-break，我会尽快接受你的答复。