CSS文本自动换行实现

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.

CSS文本自动换行实现相关推荐

php让文本自动换行,css文本自动换行如何设置？
本篇文章给大家带来的内容是关于css文本自动换行如何设置,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. CSS3包含几个额外的功能,如下: 1.文本溢出 2.自动换行 3.字断 CS ...
css标签折行显示溢出隐藏,css 文本自动换行和超出隐藏
强制不换行 div{ //white-space:不换行;normal 默认;nowrap强制在同一行内显示所有文本,直到文本结束或者遭遇 br 对象 white-space:nowrap; } 超出 ...
html中文本不自动换行,CSS禁止文本自动换行代码
使用CSS样式 white-space:nowrap 可以定义某个区域内的内容是否可自动换行,默认是可以的.如果设置的值为 nowrap 将禁止自动换行,如上图所示.内容超过窗体可显示的区域外时将在浏 ...
html怎么让文本自动换行不,【HTML】让pre标签文本自动换行
利用这个标签可以将其包起来的文字排版.格式,原封不动的呈现出来. 也就是说你输入的东西被原封不动的输出,包括你输入的空格之类的,不用和等来表示空格或者回车了. 但是,默认情况下, 标签中的内容若 ...
CSS文本样式和CSS3文本效果以及背景
CSS文本样式 text-indent属性 text-indent属性可以为特定选项的文本进行首行缩进,取值可以是长度值或百分比,它的属性值通常使用em作为单位,text-indent: 2em;表示 ...
深入研究 CSS 文本换行
欢迎和号主[前端点线面]进群盘算法,此外本号干货满满:14个门类(100+篇原创)内容(又干又硬).<前端百题斩>pdf(助力薪资double).20+篇思维导图(知识系统化.记忆简单化) ...
css文本换行以及出现省略号简单处理
1. 使用word-wrap:break-word 不生效的情况: 1. 对行元素不生效;2. 代码里有默认设置的不换行;3. 由于粘贴复制的英文段落,导致文字换行不生效,有时候是文字被切割,于是删 ...
Html5 css文本属性,html5常用文本标签、CSS文本外观属性，你了解多少？
一.HTML5中常用的文本标签 1.标题标签 (1)定义及用法: HTML中,定义了6级标题,分别为h1. h2.h3.h4. h5. h6,每级标题的字体大小依次递减,1级标题字号最大,6级标题字号 ...
【CSS 文本属性（Text）】
CSS 文本属性 CSS 文本属性(Text) 1. color 属性: 颜色的前景色 (文本/文本装饰/边框/当前颜色的颜色) 2. direction 属性: 文本/表列/水平溢出的方向 (文 ...

CSS文本自动换行实现

1、单词自动换行

2、按内容换行

CSS文本自动换行实现相关推荐

最新文章

热门文章