Question

我想将单词包装在定义的位置。

在德国，有时我们会用几个名词组成很长的单词。如果单词太长并且需要自动换行，我想在两个单词的边界处包裹这么长的单词。

例如，我们有“ Unternehmenskunden”一词，表示公司（Unternehmens）客户（Kunde）。我希望这个词可以分为“ Unternehmens”和“ kunde”。我试图将两个单词部分包装成自己的跨度，但这并没有影响包装。 CSS类word-break和word-wrap没有相应的值。

我尝试将空间包装成自己的跨度，并用display: none删除它，或用width: 0;缩小它

也许有某种隐藏的字符标记了一个分词但没有

这是一个小提琴，可以帮助说明我尝试实现的目标以及到目前为止所做的努力：https://jsfiddle.net/nbk9ptay/3/

Answer 1

使用内联块跨度来包装子词。

然后您便可以控制轮廓。样式如何设置取决于您。使用内联块，仅凭HTML的性质，当宽度足够时，您将得到一个完整的长字，而当其分解时，您将得到一个拆分的双行。

如果有帮助，这里的a post也涉及到截断和缩放字体大小。

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>

Answer 2

由于@GrumpyCrouton，我找到了解决方案。他向我指出，关于任意自动换行的问题中有答案。

答案是，如果您想在自动换行How to word wrap text in 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>

或者如果您不想在自动换行How to word wrap text in 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>

如何在定义的位置包装文字？

2 个答案: