css怎么实现超出换行-前端问答-PHP中文网

css怎么实现超出换行

PHPz

发布： 2023-04-21 14:20:16

原创

2961人浏览过

在网页设计与开发中，一个常见的问题就是文字或者图片对于一定宽度容器的自适应。大多数情况下，这些元素会自动缩小或者拉伸以适应其父级容器的宽度。然而，当一个元素的内容超出其父级容器的宽度时，就需要用到 css 中的“超出换行”（overflow-wrap）属性。

超出换行的作用是在指定宽度容器内，当元素内容可读性不好或不完整时，实现强制自动换行，使内容更加美观和易于阅读。

超出换行有两种属性值：“normal” 和 “break-word”，它们的区别如下：

normal

默认情况下，元素中的文本会自动换行，以适应其宽度容器的大小。在这种情况下，文字会按照单词的边界进行断行，并保持空格前后的完整性。

break-word

如果设置了 break-word 属性，则文本将在任何字母或数字处断开，从而强制进行自动换行。这是一个非常实用的属性，特别是当你想确保一些长单词或者 URL 内容不会超出容器范围的情况下。

立即学习“前端免费学习笔记（深入）”；

下面将通过一些实例来演示超出换行怎样实现。

实现长单词的换行

下面是一个单词很长的段落，没有超出容器的宽度限制：

<p>
   pneumonoultramicroscopicsilicovolcanoconiosis pneumonoultramicroscopicsilicovolcanoconiosis pneumonoultramicroscopicsilicovolcanoconiosis
</p>

登录后复制

在容器宽度较小的情况下，文字并不会自动换行。为了解决这个问题，我们使用超出换行属性：

<p style="overflow-wrap: break-word;">
   pneumonoultramicroscopicsilicovolcanoconiosis pneumonoultramicroscopicsilicovolcanoconiosis pneumonoultramicroscopicsilicovolcanoconiosis
</p>

登录后复制

效果如下：

实现文字溢出的换行

下面是一个没有超出限制的段落，一旦超出容器宽度，文字就会溢出：

<p>
   Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi hendrerit ex vel luctus dapibus. Curabitur velit arcu, efficitur ut dictum at, pharetra vel nibh. Duis auctor lacus non magna ultricies, vitae sollicitudin enim imperdiet. Fusce adipiscing euismod velit, id rhoncus dolor gravida vel.
</p>

登录后复制

在容器宽度较小的情况下，内容将被截断或者超出容器宽度。为了解决这个问题，我们使用超出换行属性：

<p style="overflow-wrap: break-word;">
   Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi hendrerit ex vel luctus dapibus. Curabitur velit arcu, efficitur ut dictum at, pharetra vel nibh. Duis auctor lacus non magna ultricies, vitae sollicitudin enim imperdiet. Fusce adipiscing euismod velit, id rhoncus dolor gravida vel.
</p>

登录后复制

效果如下：