在页面宽度减小时将文本向下换行可以通过CSS中的word-wrap
和overflow-wrap
属性来实现。
word-wrap
属性:该属性用于指定当单词长度超过容器宽度时的换行方式。常用的取值有:normal
:默认值,不强制换行。break-word
:当单词长度超过容器宽度时,将单词拆分为多行显示。overflow-wrap
属性:该属性用于指定当单词长度超过容器宽度时的换行方式,与word-wrap
类似。常用的取值有:normal
:默认值,不强制换行。break-word
:当单词长度超过容器宽度时,将单词拆分为多行显示。示例代码如下:
/* CSS样式 */
.text {
word-wrap: break-word;
overflow-wrap: break-word;
}
<!-- HTML代码 -->
<div class="text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod, nunc ac ultrices tincidunt, velit nunc tincidunt nunc, nec tincidunt nunc nunc nec nunc.
</div>
以上代码中,当页面宽度减小时,文本将会自动换行显示,避免超出容器宽度而导致的内容溢出问题。
腾讯云相关产品和产品介绍链接地址:
领取专属 10元无门槛券
手把手带您无忧上云