css超出一行添加省略号属性
css超出一行添加省略号属性:text-overflow和white-space
转自:http://caibaojian.com/css-white-space.html
通过使用text-overflow和white-space属性来使文本在一行内显示,超出则加省略号,添加如下html代码:
<p>前端开发博客专注前端开发和技术分享,如果描述超过100像素,则会隐藏,添加省略号</p>
CSS:需要加上宽度(width:100px)、超出隐藏(overflow:hidden;)、强制在同一行显示(white-space: nowrap;)、省略号(text-overflow:ellipsis;)
p{width: 100px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;}
测试浏览器: IE6/7/8/9、opera12.02、firefox15.0.1、chrome21.0.1180.89 m
1、text-overflow: ellipsis;
这里的重点样式是 text-overflow: ellipsis;
不过话说text-ellipsis是一个特殊的样式,有关解释是这样的:text-overflow属性仅是注解,当文本溢出时是否显示省略标记。并不具备其它的样式属性定义。要实现溢出时产生省略号的效果还须定义:强制文本在一行内显示(white-space:nowrap)及溢出内容为隐藏(overflow:hidden),只有这样才能实现溢出文本显示省略号的效果。
这里面需要限定宽度、文字显示在一行中(white-space:nowrap;)和使用隐藏属性overflow。
网上给支持低版本的opera一个办法,就是-o-text-overflow:ellipsis;
2.white-space属性
定义:white-space 属性设置如何处理元素内的空白。
实例:规定段落中的文本不进行换行:
p{ white-space: nowrap;}
可能的值
值 描述
normal 默认。空白会被浏览器忽略。
pre 空白会被浏览器保留。其行为方式类似 HTML 中的 <pre> 标签。
nowrap 文本不会换行,文本会在在同一行上继续,直到遇到
标签为止。
pre-wrap 保留空白符序列,但是正常地进行换行。
pre-line 合并空白符序列,但是保留换行符。
inherit 规定应该从父元素继承 white-space 属性的值。
Object.style.whiteSpace=normal|nowrap|pre
3.word-wrap
定义:word-wrap 属性允许长单词或 URL 地址换行到下一行。
实例:允许长单词换行到下一行:
p.test {word-wrap:break-word;}
可能的值:
值 描述
normal 只在允许的断字点换行(浏览器保持默认处理)。
break-word 在长单词或 URL 地址内部进行换行。
1.(IE浏览器)连续的英文字符和阿拉伯数字,使用word-wrap : break-word ;或者word-break:break-all;实现强制断行
2.(Firefox浏览器)连续的英文字符和阿拉伯数字的断行,Firefox的所有版本的没有解决这个问题,我们只有让超出边界的字符隐藏或者,给容器添加滚动条.a{word-break:break-all; width:200px; overflow:auto;}
.(Firefox浏览器)使用 table-layout:fixed;强制table的宽度,内层td,th采用word- break : break-all;或者word-wrap : break-word ;换行,使用overflow:hidden;隐藏超出内容,这里overflow:auto;无法起作用
转载于:https://www.cnblogs.com/doubolexiang/p/7171116.html
css超出一行添加省略号属性相关推荐
- css超出一行省略号:text-overflow和white-space超出隐藏显示省略号
css超出一行省略号:text-overflow和white-space超出隐藏显示省略号 通过使用text-overflow和white-space属性来使文本在一行内显示,超出则加省略号,添加如下 ...
- flex布局遇到white-space:nowrap怎么超出一行显示省略号
一.场景: 二.简化场景: 三.页面布局: <ul class="g-list"><li class="g-list-item">< ...
- css 超出一行显示... 超出多行显示...
一定要设置宽度,当然,如果你的盒子内容就是占满一行,当我没说 1,css超出一行用点表示 white-space:nowrap; overflow:hidden; text-overflow:elli ...
- css超出隐藏显示省略号
width: 300px; overflow: hidden;/*超出部分隐藏*/ text-overflow:ellipsis;/* 超出部分显示省略号 */ white-space: nowrap ...
- CSS超出部分显示省略号
height: 76rpx; width: 300rpx; display: -webkit-box; /*设置为弹性盒子*/ -webkit-line-clamp: 2; /*最多显示3行*/ ov ...
- css 超出文字显示省略号
这里写自定义目录标题 单行省略号 多行省略号 单行省略号 直接上代码 <!DOCTYPE html> <html lang="en"> <head&g ...
- js 实现超出字符添加省略号功能
当我们需要用js来实现省略号功能是 可以使用以下方法 ,方法是分开了写的,可以单独调用 html <div class="dome">偷偷ce试 一下 enmmmmm& ...
- CSS 超出部分显示省略号
文章目录 单行超出显示省略号 多行超出显示省略号 单行超出显示省略号 直接看代码: <!DOCTYPE html> <html lang="en"> < ...
- css超出文字用省略号表示
css代码 //css .name{width: 62px;display: inline-block; font-family: PingFangSC;color: #F7F6FD; white-s ...
最新文章
- 杭州网络推广浅析网站优化如何更快的提升收录?
- 详述switch分支语句
- 让你不再害怕指针的应用-全程仿真+注解(第一部分:变量)
- Apollo自动驾驶入门课程第⑩讲 — 控制(下)
- 泰晤士高等教育亚洲大学排行榜发布:清华登顶榜首
- 为什么大学普遍都教C/C++、Java,而不教Golang、Python、Rust?
- bat自动登录服务器取文件,批处理(.bat)一键备份资料,自动登录局域网进行备份,加~批处理.bat加密软件...
- 绝大部分人都错误的把赚钱或者人生都放在依靠外界
- apache2: unrecognized service
- C#复习笔记(3)--C#2:解决C#1的问题(泛型)
- TCP客户端与服务器的实现
- 中国程序员最爱读错的70个英文单词!注有正解
- 李兴华java开发百度网盘_魔乐科技MLDN-李兴华老师零基础学Java系列教程 百度网盘...
- Modbus-RTU错误响应
- 小学计算机室培训心得,小学计算机培训心得体会
- ajax removeclass,我执行ajax后怎么不能$(this).removeClass(disabled);
- TAHOMA:Physical Representation-based Predicate Optimization for a Visual Analytics Database,IEEE2019
- 爬虫之京东5g手机爬虫+谷歌浏览器打开窗口使用
- 微信小程序上滑加载下拉刷新(onscrollLower)分批加载数据 下篇
- Scala中List的步长by