在HTML中,是否可以插入单词换行提示?

时间:2012-04-19 10:46:29

标签: html word-wrap soft-hyphen wbr

想象一下,我在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­cently

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

5 个答案:

答案 0 :(得分:20)

在单词中使用&shy;或在单词之间使用<wbr>,因为<wbr>不会引入连字符。

另见:

答案 1 :(得分:7)

不完全,但关闭:http://jsfiddle.net/uW4h8/1/

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

答案 2 :(得分:2)

元素<wbr>&nbsp;经常有用,但并非总是如此。在设计静态目标网页时,它们尤其成问题:(a)必须在各种屏幕和浏览器上工作,并且(b)必须看起来很好。

在这种情况下,我想要控制各种不同屏幕分辨率的换行提示。为此,我使用<br>标签和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;
}

答案 3 :(得分:0)

当不允许换行时,使用不间断空格U + 00A0(如果没有方便的方式输入字符,则使用&nbsp;),否则使用正常空格。< / p>

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

答案 4 :(得分:0)

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

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