首页 > 代码库 > 文字内容超出自动换到第二行显示
文字内容超出自动换到第二行显示
背景：页面默认显示为图1，当子元素B的内容很多时，显示为图2，且1跟2的布局方式均为右对齐
图1
图2
css样式：
.clearfix:after {content: ".";display: block;height: 0;font-size: 0;clear: both;visibility: hidden;}.clear { display: block;clear: both; height: 0;overflow: hidden;}.squre{display: inline-block; width: 12px; height: 12px; margin-right: 3px; background: #666;}.floatR{ float: right;}html布局
<p class="clearfix" style="width: 100px; text-align: right; background: #ccc; padding: 10px;"> <i class="squre"></i> <span class="floatR">天苍苍</span></p><p class="clearfix" style="width: 100px; text-align: right; background: #ccc; padding: 10px;"> <i class="squre"></i> <span class="floatR">天苍苍野茫茫</span></p>
运行效果图：
（Chrome运行效果图）
（IE运行效果图）
文字内容超出自动换到第二行显示
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。