换行、文字隐藏省略号问题
2018-06-24 02:03:35来源:未知 阅读 ()
1、一行超出文字隐藏
overflow: hidden; /*自动隐藏文字*/ text-overflow: ellipsis; /*文字隐藏后添加省略号*/ white-space: nowrap; /*强制不换行*/
2、div显示两行文字,超出两行部分省略号显示
overflow: hidden; text-overflow: ellipsis; text-overflow: -o-ellipsis-lastline; display: -webkit-box; -webkit-line-clamp: 2; /* 限制行数 */ -webkit-box-orient: vertical;
3、white-space属性可设置不换行
值 | 描述 |
normal | 默认。空白会被浏览器忽略。 |
pre | 空白会被浏览器保留。其行为方式类似 HTML 中的 <pre> 标签。 |
nowrap | 文本不会换行,文本会在在同一行上继续,直到遇到 <br> 标签为止。 |
pre-wrap | 保留空白符序列,但是正常地进行换行。 |
pre-line | 合并空白符序列,但是保留换行符。 |
inherit | 规定应该从父元素继承 white-space 属性的值。 |
4、word-break属性设置自动换行的处理方法
值 | 描述 |
normal | 使用浏览器默认的换行规则。 |
break-all | 允许在单词内换行(解决长单词或url地址换行显示) |
keep-all | 只能在半角空格或连字符处换行。 |
标签:
版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有
上一篇:旋转卡 可以用做登录注册
下一篇:CSS
- css:css3(圆角边框、盒子阴影、文字阴影) 2020-06-05
- 网页搜索框里显示字段鼠标点击后就隐藏的方法 2020-05-29
- title 换行显示 2020-05-14
- CSS文本超出自动隐藏显示省略号 2020-04-27
- Bootstrap4网格系统+文字排版+颜色 简单练习 2020-04-14
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