想象一下,我在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中暗示自动换行?
答案 0 :(得分:20)
答案 1 :(得分:7)
不完全,但关闭:http://jsfiddle.net/uW4h8/1/。
简而言之,您应该为文本容器设置white-space: nowrap;
,并使用<wbr>
根据需要在单词之间插入分隔符。
答案 2 :(得分:2)
元素<wbr>
和
经常有用,但并非总是如此。在设计静态目标网页时,它们尤其成问题:(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(如果没有方便的方式输入字符,则使用
),否则使用正常空格。< / 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>