CSS文本自动换行实现

最新推荐文章于 2024-08-12 15:57:18 发布

sj.hu

最新推荐文章于 2024-08-12 15:57:18 发布

阅读量2.1k

点赞数 1

分类专栏：前端文章标签： css html

本文链接：https://blog.csdn.net/weixin_37547589/article/details/104662874

版权

前端专栏收录该内容

4 篇文章 0 订阅

订阅专栏

1、单词自动换行

div {
	width:400px;
	word-break:break-word;
}

2、按内容换行

div是块级元素，每个单独占一行；可以用display: inline-block将多个div强制显示在一行，这样当多个div的内容可以显示在一行时就显示在一行，如果加起来超过一行就自动分行显示

.tel {
	width:400px;
	background: #bbb;
	margin: 0 auto;
	padding: 10 0px;
	word-break: break-word;
}
.desc {
	display: inline-block;
}

<div class="tel">
    <div class="desc">Within the United States:&nbsp;</div>
    <div class="desc">888-9999-000&nbsp;</div>
    <div class="desc">English: 08:30-12:00 13:00-20:00&nbsp;</div>
</div>

这个方法对大多数浏览器都是有效的，但如果是用作邮件模板在outlook中display: inline-block无效，原因是outlook是重table设计，div的style不起作用。

Outlook 2000–03 Partial. Supports block, inline, list-item, and none.
Outlook 2007–16 Partial. Sometimes supports none.
Outlook Express Partial. Supports block, inline, list-item, and none.