关于CSS3文本换行的方法

一、

目前可被主流支持的：

text-overflow 主要解决文本溢出，

取值：clip[ 默认值 ] | ellipsis | string(仅支持Firefox)

配合   white-space : nowrap ; overflow : hidden  使用

二、

word-wrap

取值：normal [ 默认值 ] | break-word

--长单词换行

word-break

取值：normal  [ 默认值 ] | break-all | keep-all

--非CJK（"中日韩"）脚本的断行规则

break-all 允许在单词内换行。
keep-all 只能在半角空格或连字符处换行。


重点：下述常用的三者区别

默认情况下：①单词末尾放不下：另起一行，

                    ②长单词过长且字母连续：不折断

                    ③长单词过长且带破折号：保守折断 


word-wrap：break-word  长单词过长且字母连续：吻合折断 [ 改② ]


word-break：keep-all       长单词过长且带破折号：不折断 [ 改③ ]

word-break：break-all      单词末尾放不下          ：吻合折断 [ 改① ]

                                            长单词过长且字母连续：吻合折断 [ 改② ]

长单词过长且带破折号：吻合折断 [ 改③ ]


保守折断是按一定格式折断，吻合折断是不留任何边界空白的折断



时间： 2024-10-17 04:54:25

关于CSS3文本换行的方法的相关文章

CSS3文本温故

1.CSS早期属性,分为三大类:字体.颜色和文本: 2.CSS文本类型有11个属性: 注:还有一个颜色属性:color,主要用来设置文本颜色 3.CSS3文本阴影属性:text-shadow语法:text-shadow:none | <length> none | [<shadow>,] * <shadow>或none | <color> [,<color]*也就是:text-shadow:[颜色color] x轴位移(x-offset) y轴位移(y

HTML 学习笔记 CSS3 (文本效果)

text-shadow 语法 text-shadow : none | <length> none | [<shadow>, ] * <shadow> 或none | <color> [, <color> ]* 也就是: text-shadow:[颜色(Color) x轴(X Offset) y轴(Y Offset) 模糊半径(Blur)],[颜色(color) x轴(X Offset) y轴(Y Offset) 模糊半径(Blur)]... 或

CSS学习笔记：文本换行显示（word-wrap）

在CSS3中新定义了文本换行属性,word-wrap: nomal属性值表示控制连续文本换行. break-word属性值表示内容将在边界内换行.如果需要,词内换行(word-break)也会发生. 换行技术比较分析 IE定义了多个换行处理属性:line-break.word-break.word-wrap,另外CSS1定义了white-space,CSS3增加了word-wrap. line-break专门负责控制日文换行. word-wrap属性可以控制换行.当属性值取word-wrap时,

[HTML] CSS3 文本效果

CSS3 文本效果 CSS3中包含几个新的文本特征. 在本章中您将了解以下文本属性: text-shadow word-wrap 浏览器支持 Internet Explorer 10, Firefox,Chrome, Safari, 和 Opera支持text-shadow 属性. 所有的主流浏览器支持自动换行(word-wrap)属性. 注意: Internet Explorer 9及更早IE版本不支持 text-shadow 属性. CSS3的文本阴影 CSS3中,text-shadow属性

文本换行word-wrap、word-break与white-space

本文同步至微信公众号:http://mp.weixin.qq.com/s?__biz=MzAxMzgwNDU3Mg==&mid=401671055&idx=1&sn=b88c986e61708da0027fac035ad36f0f#rd 对于后续文章感兴趣的可以添加关注: 文中有些地方没显示全,查看全部内容,请点击上面的原文链接哈 在对页面内容进行排版的时候,不可避免的会遇到对文本进行处理的问题.今天整理了文本换行相关的内容,记录下来分享之.毕竟,好记性不如烂笔头嘛. 对于文本换行

IE兼容CSS3圆角border-radius的方法

IE兼容CSS3圆角border-radius的方法 优化网站js效果,网上看见一个很简单方便的兼容圆角的方法,记下来. 和大家分享一下,知道的高手就当捧个过场.嘻嘻 1.下载border-radius.htc 2.CSS .radius{ -moz-border-radius: 11px; -webkit-border-radius: 11px; border-radius: 11px; behavior: url(border-radius.htc); } 优点: 一.最为方便让IE实现圆角

CSS3 文本效果

1 CSS3 文本阴影在 CSS3 中,text-shadow 可向文本应用阴影,能够规定水平阴影.垂直阴影.模糊距离,以及阴影的颜色.text-shadow: 5px 5px 5px red; 2 CSS3 自动换行在 CSS3 中,word-wrap 属性允许您允许文本强制文本 进行换行 ,对单词进行拆分:word-wrap:break-word; 3 text-align-last 设置如何对齐最后一行或紧挨着强制换行符之前的行. 4 text-emphasis 向元素的文本应用重点标记以

iOS text的长文本换行

最近遇到要显示的文本很长,而且要换行显示. 总结一下换行的方法: 1.直接用空格键来换行:(这种换行不彻底,遇到iPhone6Plus就不行了) NSString *authenticationString = [NSString stringWithFormat: @"1.通过荟员认证,且认证时绑定中国银联白金信用卡或钻石信用卡的持卡人可享受该权益;                                                                         

CSS3文本溢出

text-overflow: 1 text-overflow:clip | ellipsis; clip:剪切多余的文字. ellipsis:文本溢出时显示省略标记. 要实现文本溢出剪切显示省略标记,还需要两个属性的配合,并定义文本容器宽度. 1 2 3 text-shadow:ellipsis; white-space:nowrap; //强制文本在一行显示 overflow:hidden;  //溢出内容隐藏 1 <!DOCTYPE html> 2 <html> 3 <h