如何在指定位置换行？

Question

我希望在指定位置换行。

在德国，有时候会有由几个名词组成的非常长的单词。如果这样的单词太长，需要换行，我想把这样的单词在两个单词的边界处换行。

例如，我们有一个单词“Unternehmenskunden”，意思是企业（Unternehmens）客户（Kunde）。我希望这个单词能够被拆分成“Unternehmens”和“kunde”。我试着将这两个单词部分放入各自的中，但这并没有影响换行。CSS类word-break和word-wrap没有这个功能。

我试着将空格包裹在它自己的中，并使用display: none将其删除或使用width: 0;缩小它。

也许有一种隐藏的字符可以标记单词的分割，但不会对页面产生影响。

这里有一个示例链接，可以帮助说明我尝试实现的内容以及我迄今为止所尝试的方法：https://jsfiddle.net/nbk9ptay/3/

- coderuby

---

那不是重复的。我不想知道如何在任意位置换行。我想知道如何在指定位置换行。 - coderuby

是的，页面上有关于这个问题的答案，例如https://dev59.com/A3M_5IYBdhLWcg3w9oaG#1147915或https://dev59.com/A3M_5IYBdhLWcg3w9oaG#1147918。 - GrumpyCrouton

不错！谢谢@GrumpyCrouton。我没有想到在关于任意换行的问题中找到答案！感谢您指出给我！ - coderuby

不用谢 :) - GrumpyCrouton

Answer 1

感谢 @GrumpyCrouton，我找到了一个任意单词换行的解决方案。

如果您希望在单词换行时有连字符，请使用软连字符(­)。具体方法请参见HTML中如何自动换行文本？

<div style="width: 120px; border: 1px solid red;">Unternehmens&shy;kunde</div>

<div style="width: 200px; border: 1px solid red;">Unternehmens&shy;kunde</div>

如果您不希望在自动换行时出现连字符，可以使用html实体​ 如何在HTML中换行文本？:

<div style="width: 120px; border: 1px solid red">Unternehmens&#8203;kunde</div>

<div style="width: 200px; border: 1px solid red">Unternehmens&#8203;kunde</div>

- coderuby

---

比我的答案好多了！ - Kalnode

Answer 2

使用inline-block spans来包裹子词。

然后你可以控制分隔。如何样式化分隔由你决定。使用inline-block，仅凭HTML的性质，在有足够宽度时会得到完整的长单词，而在拆分时会得到双线拆分。

此外，如果有帮助的话，这里是一篇文章，涉及到截断和缩放字体大小。

Codepen

.container {
  width: 250px;
}

.subword {
 display: inline-block;
}

<div style="width: 800px; border: 1px solid black; margin-bottom: 4em;">
<span class="subword">Unternehmens</span><span class="subword">kunde</span>
</div>

<div style="width: 100px; border: 1px solid black;">
<span class="subword">Unternehmens</span><span class="subword">kunde</span>
</div>

- Kalnode

---

这是一个可以接受的解决方案，但我觉得在有更简单的实现方法时，它有些过度。 - GrumpyCrouton

是的，这话说得很直接，但我看到其他解决方案也都有令人烦恼的地方。 - Kalnode

是的，这很公平。 - GrumpyCrouton