css中关于文本换行的处理总结

1. white-space 属性，这个属性有以下几个用法：

normal	默认。空白会被浏览器忽略。
pre	空白会被浏览器保留。其行为方式类似 HTML 中的 <pre> 标签。
nowrap	文本不会换行，文本会在在同一行上继续，直到遇到 <br> 标签为止。
pre-wrap	保留空白符序列，但是正常地进行换行。
pre-line	合并空白符序列，但是保留换行符。
inherit	规定应该从父元素继承 white-space 属性的值。

2、word-break 属性规定自动换行的处理方法

提示：通过使用 word-break 属性，可以让浏览器实现在任意位置的换行。

normal	使用浏览器默认的换行规则。
break-all	允许在单词内换行。
keep-all	只能在半角空格或连字符处换行。

. word-break:break-all;只对英文起作用，以字母作为换行依据

. word-wrap:break-word; 只对英文起作用，以单词作为换行依据

.white-space:pre-wrap; 只对中文起作用，强制换行

.white-space:nowrap; 强制不换行，都起作用

.white-space:nowrap; overflow:hidden; text-overflow:ellipsis;不换行，超出部分隐藏且以省略号形式出现，这个在网页中用的也是比较多的一个属性注意。

一定要指定容器的宽度，不然是没有效果的

要注意word-break 是IE5+专有属性

3、出现文字省略号，使用这四个属性即可

   text-overflow：表示当文本溢出时是否显示省略标记，ellipsis表示省略号效果，clip 表示截取的效       果。overflow:hidden;  将文本溢出的内容隐藏。white-space:nowrap;  是禁止文字换行。width：  （可选）可以写固定值，也可以根据宽度自适应显示效果。

css中关于文本换行的处理总结相关推荐

html表格输入框怎么左移动,当我向CSS中的文本框添加边框时，HTML表单输入会移动...
我想在登录表单上的输入字段中添加边框,但是当我添加边框时:1px纯黑色;到#登录表单输入,然后所有的文本框移出位置.当我向CSS中的文本框添加边框时,HTML表单输入会移动当用户输入不正确的凭据到表 ...
HTML 与 CSS 中的文本
HTML 与 CSS 中的文本结构化元素结构化元素就是指 HTML 元素中具有明确含义和作用的元素,例如 `` 元素表示段落.相对于 HTML 4.01 版本而言,HTML5 版本新增了一系列结构 ...
css中文本指什么,CSS中的文本属性
本文总结一下CSS中关于文字的相关属性,最后给出实例. CSS基础文字属性文字的基础属性主要包括:字体.颜色和文本.除去颜色color的属性外,字体和文本的相关属性可以权威参考: CSS 文本属性( ...
php 换行 html_总结html，css中的各种换行方法
在web开发中,可以使用html中的br标签进行换行,如果在一个文章里可以在文章需要换行的地方加入即可实现自动换行-常说的小换行,与换行前没有间隔:使用标签来实现大换行.也可以使用css属性来实现 ...
web前端培训：CSS中单行文本溢出显示省略号的方法
CSS中单行文本溢出显示省略号的方法你知道吗?在web前端技术学习中,这个问题其实是属于老生常谈了,因为css单行文本的应用是非常频繁的,比如网站最基本的文章列表,标题会很长,而显示列表的区域宽度却没 ...
html文本阴影水平垂直,CSS中使用文本阴影与元素阴影效果
文本阴影介绍在CSS中使用text-shadow属性设置文本阴影,该属性一共有4个属性值如:水平阴影.垂直阴影.(清晰度或模糊距离).阴影颜色. text-shadow属性值说明,在文本阴影实践中: ...
css可以设置文本框颜色吗,如何在css中设置文本框颜色
如何在css中设置文本框颜色发布时间:2021-04-29 15:33:54 来源:亿速云阅读:72 作者:Leah 如何在css中设置文本框颜色?针对这个问题,这篇文章详细介绍了相对应的分析和解 ...
总结html，css中的各种换行方法
html,css中的换行 1. css溢出与换行该如何处理换行,注意:只对英文有效 a.长单词换行 word-wrap : normal : 默认,采用浏览器默认形式,不破坏单词结构 break-w ...
html中文字空心如何设置,css 中字体文本小诀窍
本篇介绍 css 几种文本修饰的案例. 1.现实中的文字效果 1.1 凸版印刷效果背景知识:text-shadow 凸版印刷需要考虑两种情况:浅底深色字和深色浅底字浅底深色字代码示例凸版印刷效果 ...

css中关于文本换行的处理总结

css中关于文本换行的处理总结相关推荐

最新文章

热门文章