div超出宽度自动换行

一、文字超出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;
}

2. 当我们需要让一行中元素固定宽度，但是元素的个数又不确定时，我们可以使用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;
}