文本溢出text-overflow
2018-06-24 02:14:03来源:未知 阅读 ()
在实际应用中,我们经常会遇到本文换行和文本溢出时截取字符串的情况,在理解文本溢出属性之前,我们首先要了解文本换行和空白符这两个属性,然后再学习文本溢出text-overflow属性。
- white-space属性:用来对空格进行处理。
可能的属性值有:
(2)pre:使用pre属性值的时候,空白和换行将会被保留,同时超出容器边缘也不会换行。类似于HTML中的<pre>标签。
(1)normal:默认属性值,多余的空白会被浏览器忽略掉,只会保留一个空格效果。
(3)nowrap:强制在同一行内显示所有文本,合并文本间的多余空白,直到碰到了换行标签<br />为止。
(4)pre-line:合并空白序列,但保留换行符,IE8以下浏览器不支持此属性。
(5)pre-wrap:保留空白符序列,但是正常进行换行,IE8以下浏览器不支持此属性。
(6)inherit:规定应该从父元素继承white-space属性的值,此属性值在所有的IE版本都不支持。
- 文本换行word-wrap属性:
一个div内,通常希望文字超过div的宽度就会实现自动换行,如果是汉字,那么一切顺利,但如果是连续的英文字符或者数字就会超出容器的边界。但是word-wrap属性则能够实现它的换行功能。
可能的属性值:
(1)normal:默认值,保持浏览器的默认处理,只在允许的断字点换行,也就是非连续的英文字符数字或者汉字可以进行换行。
(2)break-word:此属性值可以实现内容换行,也就是可以实现在边界内换行,不能够超出边界。它不会将单词截断进行换行,要尽可能的保持单词的完整性。table默认状态下并不支持word-wrap:break-word,需要进行一下特殊处理。
- 文本溢出 text-overflow属性
(1)clip:此属性值表示直接裁切,并不显示省略标记(...)。
(2)ellipsis:此属性可以设置当文本溢出时将显示省略标记(...)。
- 我们常用的文本溢出的经典代码为:
- 当存在长英文文本时,text-overflow属性起作用的前提是overflow(或overflow-y或overflow-x):hidden | auto | scroll
- 当文本为汉字时,text-overflow属性起作用的前提是实现汉字不自动换行可使用word-break: keep-all; 或 white-space: nowrap; overflow(或overflow-y或overflow-x):hidden | auto | scroll
- 自动换行word-break属性:
此属性用法与word-wrap属性类似,它具体的属性设置,可以让浏览器实现任意位置的换行。
normal:中文到边界上的汉字换行,英文从整个单词换行keep-all:对于英文长文本不能换行,但对于中文的处理,各浏览器不一致,截图为在chrome中的表现。(在空白符及标点处换行)
break-all: 对于英文长单词来说,会截断单词换行,长单词占据当前行剩余空间。但对于中文的处理,各浏览器不一致,截图为在chrome中的表现。(中文到边界上的汉字换行,但不允许标点置于段首)
标签:
版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有
上一篇:vue如何加入百度联盟广告
下一篇:CSS的常用属性(一)
- CSS文本超出自动隐藏显示省略号 2020-04-27
- HTML字符实体与文本格式化标签 2020-03-30
- HTML 链接展现形式与target属性和锚文本设置 2020-03-25
- 行内和块状元素水平居中与单行或多行文本垂直居中及隐性改 2020-03-07
- 文本空白,溢出,省略号 2020-03-06
IDC资讯: 主机资讯 注册资讯 托管资讯 vps资讯 网站建设
网站运营: 建站经验 策划盈利 搜索优化 网站推广 免费资源
网络编程: Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它
服务器技术: Web服务器 Ftp服务器 Mail服务器 Dns服务器 安全防护
软件技巧: 其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷
网页制作: FrontPages Dreamweaver Javascript css photoshop fireworks Flash