在HTML中，是否可以插入换行提示？
在HTML中，是否可以插入换行提示？
提问于 2012-04-19 18:46:29
假设我在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
Stack Overflow用户
回答已采纳
发布于 2012-04-19 18:54:32
Stack Overflow用户
发布于 2012-04-19 18:54:00
不完全正确，但很接近：http://jsfiddle.net/uW4h8/1/。
简而言之，您应该为文本容器设置white-space: nowrap;，并根据需要使用<wbr>在单词之间插入分隔符。
Stack Overflow用户
发布于 2016-01-05 06:41:56
元素<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;
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/10226416
复制相关文章
相似问题