div超出宽度自动换行

发布时间：2023-05-19

一、文字超出div自动换行

在实际开发中，我们经常会遇到文字内容过长的情况，如果没有做好处理，这些长文本可能会导致页面布局紊乱。一种常见的解决方法是将过长的文字截断并显示省略号，但这也会导致用户需要额外的操作去查看完整的内容。因此，我们可以使用CSS中的 word-wrap 属性来实现当文字超出 div 范围时自动换行，从而更好的展示全部的内容。 CSS样式示例：

div {
    width: 300px;
    height: 100px;
    border: 1px solid #ddd;
    overflow: hidden; /* 超出部分隐藏 */
    text-overflow: ellipsis; /* 文本省略号 */
    white-space: nowrap; /* 禁止换行 */
    word-wrap: break-word; /* 超出部分自动换行 */
}

二、超出div部分自动换行

当我们在设计网页时，经常会遇到超过 div 宽度的内容需要在同一行中显示的情况。这时我们可以使用 CSS 中的 flex 布局来解决这个问题。具体地说，就是使用 flex 布局中的 flex-wrap: wrap 属性，告知浏览器根据容器的大小和内容的大小自动换行。除此之外，我们还需要将超出 div 的元素设置为 flex: 0 0 auto 以让它们占据自己的空间，而非挤压容器中的其他元素。 CSS样式示例：

.container {
    display: flex;
    flex-wrap: wrap;
    width: 300px;
    border: 1px solid #ddd;
}
.box {
    flex: 0 0 auto;
    width: 100px;
    height: 100px;
    border: 1px solid #ddd;
}

三、其他相关技巧

除了上述两种情况，还有一些其他的情况下我们需要实现 div 超出宽度自动换行的效果。

  1. 当 div 中同时包含图片和文字时，我们可能希望图片能够自动适应 div 大小并且文字能够自动环绕在图片周围。这时我们可以使用 CSS 中的 float 布局来实现。具体地说，就是将图片元素设置为 float: left; 或 float: right;，然后将文字元素设置为 overflow: hidden; 和 text-overflow: ellipsis; 属性，使其自动环绕图片并且自动截断省略超出部分的文字。 CSS样式示例：
.container {
    width: 300px;
    border: 1px solid #ddd;
    overflow: hidden;
}
img {
    float: left;
    width: 100px;
    height: 100px;
    margin-right: 10px;
}
.text {
    overflow: hidden;
    text-overflow: ellipsis;
}
  1. 当我们需要让一行中元素固定宽度，但是元素的个数又不确定时，我们可以使用 CSS 中的 inline-block 布局来实现。具体地说，我们可以将元素设置为 display: inline-block; 和 white-space: nowrap; 属性，使之在同一行显示，如果元素总宽度超过 div 宽度，那么就自动换行。 CSS样式示例：
.container {
    width: 300px;
    border: 1px solid #ddd;
    white-space: nowrap;
}
.box {
    display: inline-block;
    width: 100px;
    height: 100px;
    border: 1px solid #ddd;
}
推荐文章