[分享]css3文字图标换行显示

CSS3提供了许多强大的特性，其中之一就是文字图标的换行显示。在Web开发中，经常使用文字图标来替代图片图标，这样可以减少HTTP请求，提高页面的加载速度。但是，如果文字图标过长，会导致页面布局出现问...

CSS3提供了许多强大的特性，其中之一就是文字图标的换行显示。在Web开发中，经常使用文字图标来替代图片图标，这样可以减少HTTP请求，提高页面的加载速度。但是，如果文字图标过长，会导致页面布局出现问题。如何解决这个问题呢？CSS3的文字图标换行显示特性可以很好地帮助我们解决这个问题。

.icon {
    display: inline-block;
    font-family: "Font Awesome 5 Free";
    font-weight: bold;
    font-size: 18px;
    line-height: 1;
    text-align: center;
    width: 1em;
    word-wrap: break-word;
} 

以上是CSS样式的实现代码。我们可以看到，在这个样式中，我们使用了display:inline-block，这样就可以让文字图标在行内显示，并且支持换行。同时，我们还设置了宽度为1em，这样文字图标的宽度就可以自适应父元素的宽度。除此之外，我们还使用了word-wrap:break-word这个属性，它的作用是当文字超出父元素的宽度时，进行自动换行。

在使用该样式时，我们只需要在标签中添加对应的字体图标即可，如下所示：

<i class="icon fa fa-address-book"></i> 

在这个例子中，我们使用了Font Awesome字体图标库，"fa fa-address-book"是该库中地址簿图标的类名。可以根据需要替换成相应的类名即可。

总之，CSS3文字图标换行显示特性使得在Web开发中使用文字图标变得更加灵活和方便，我们可以根据需要进行任意布局和设计。