Question

想象一下，我在DIV中有一个长的，多字的文本行：

亲爱的顾客，亲爱的，亲爱的。请看看我们的优惠。

DIV具有动态宽度。我想用自己的文字包装上面的文字。目前，包装发生在一个单词边界上，它最大化了第一行的长度：

|-DIV WIDTH------------------------------------|
Hello there, dear customer. Please have a look
at our offer.

我希望包装发生在句子边界上。但是，如果不需要包装，我希望该行保持为一个。

为了说明我的观点，请查看各种DIV宽度以及我希望如何包装文本：

|-DIV WIDTH--------------------------------------------------------|
Hello there, dear customer. Please have a look at our offer.
|-DIV WIDTH-----------------------------------|
Hello there, dear customer. 
Please have a look at our offer.
|-DIV WIDTH--------|
Hello there, dear 
customer. 
Please have a look
at our offer.

使用单词，您可以使用软连字符，以便在建议的音节边界上进行自动换行。如果不需要换行，仍然不可见。如果需要包装，就是它发生的地方：

magnifi&shy;cently

是否有类似的方法在HTML中暗示自动换行？

Answer 1

在单词中使用或在单词之间使用，因为不会引入连字符。

另见：

quirksmode:  compat list

Answer 2

不完全，但关闭：http://jsfiddle.net/uW4h8/1/。

简而言之，您应该为文本容器设置white-space: nowrap;，并使用根据需要在单词之间插入分隔符。

Answer 3

元素和 经常有用，但并非总是如此。在设计静态目标网页时，它们尤其成问题：（a）必须在各种屏幕和浏览器上工作，并且（b）必须看起来很好。

在这种情况下，我想要控制各种不同屏幕分辨率的换行提示。为此，我使用 标签和css。如果它变得复杂，它可能变得一团糟，但我发现它可以达到一定程度。例如：

<p class='break-hints'>
Hello there, dear customer. <br class='break-big'>
Please have a look <br class='break-small'> at our offer.
</p>

然后我使用CSS和媒体查询来指示何时应该触发各种中断。

p.break-hints br {
  display: none;
}

@media only screen and (max-width: 300px) { 
  p.break-hints br.break-small {
    display: inline;
  }
}

p.break-hints br.break-big {
  display: inline;
}

Answer 4

当不允许换行时，使用不间断空格U + 00A0（如果没有方便的方式输入字符，则使用 ），否则使用正常空格。

当单词包含连字符“ - ”时，这将不起作用，而其他一些字符（如括号）也可能会导致问题，因为有些浏览器将它们视为允许在它们之后换行。有关冗长的论文，请参阅http://www.cs.tut.fi/~jkorpela/html/nobr.html，包括处理问题的各种技巧。但是如果你的正常单词只有正常的标点符号而且没有连字符，那么用简单的方法就可以了。

Answer 5

我只是遇到了同样的问题。我有如下文字：

<div>Assistant Something / Anything Pabulum Nautical</div>

在/字符后将其断开的地方确实有助于提高可读性。

对于我来说，我通过用内联块（显然现在是inline flow-root）元素包装所需的“较低的换行优先级”块解决了该问题：

<div><span class="inline">Assistant Something</span> / <span class="inline">Anything Pabulum Nautical</span></div>

查看摘要以获取结果。

.d {
  margin: 1em;
}

#b span {
  display: inline-block;
}

<div class="d" id="a">Assistant Something / Anything Pabulum Nautical</div>

<div class="d" id="b"><span>Assistant Something</span> / <span>Anything Pabulum Nautical</span></div>

在HTML中，是否可以插入单词换行提示？

5 个答案: