html - 在 HTML 中,是否可以插入一个自动换行提示?

标签 html word-wrap soft-hyphen wbr

假设我在一个 DIV 中有一行很长的多词文本:

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 宽度以及我希望我的文本如何换行:

|-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 中的自动换行?

最佳答案

使用 &shy;用文字或 <wbr> 单词之间,如<wbr>不会引入连字符。

另见:

关于html - 在 HTML 中,是否可以插入一个自动换行提示?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/10226416/

相关文章:

html - 如何强制垂直 flexbox 中的(旋转)元素不重叠?

html - 选择 nth-child 跳过隐藏元素

html - 如何将包含文本的 div 包裹在包含图像的 div 周围?

android - 如何在带有 React Native Text 的 Android 中实现软连字符

html - 对 `htmlcxx::HTML::ParserDom::parseTree(std::string const&)' 的 undefined reference

html - div 内的 CSS 100% 宽度

html - 为什么我的文字没有环绕我的图像?

uwp - 如何在 UWP 中的 ToggleSwitch 的 Header 字段中包装文本

ios - 在 iOS 15 中,在 UILabel 中使用 unicode 字符时,软连字符无法正常工作