一、文字超出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;
}
原创文章，作者：小蓝，如若转载，请注明出处：https://www.506064.com/n/246580.html
微信扫一扫 
支付宝扫一扫 