html 文字超出部分,CSS控制文字超出部分显示省略号方法
我们经常会看到有些网站比较长的字符就会显示省略号了,实现这种效果有两个办法,一种利用程序截取字符,另一种利用css实现超出部分显示省略号,下面我来介绍第二种。
测试浏览器: IE6/7/8/9、opera12.02、firefox15.0.1、chrome 代码如下 复制代码
省略我吧 省略我吧! 省略我吧!省略我!
如果我们要给p标签定义text-overflow:ellipsis就可以这么写: 代码如下 复制代码
p {
white-space: nowrap;
width: 100%; /* IE6 需要定义宽度 */
overflow: hidden;
-o-text-overflow: ellipsis; /* Opera */
text-overflow: ellipsis; /* IE, Safari (WebKit) */
}
现在解释一下为什么要这样做:
1、text-overflow: ellipsis;
这里的重点样式是 text-overflow: ellipsis;
不过话说text-ellipsis是一个特殊的样式,有关解释是这样的:text-overflow属性仅是注解,当文本溢出时是否显示省略标记。并不具备其它的样式属性定义。要实现溢出时产生省略号的效果还须定义:强制文本在一行内显示(white-space:nowrap)及溢出内容为隐藏(overflow:hidden),只有这样才能实现溢出文本显示省略号的效果。 简单理解就是我要把文本限制在一行(white-space: nowrap;),肯定这一行是有限制的(width),并且你的溢出的部分要隐藏起来(overflow: hidden;),然后出现省略号( text-overflow: ellipsis)。
2、white-space
顺便解释一下white-space的用法
white-space属性声明建立布局过程中如何处理元素中空白符。(废话一句,这里的空白符应该指我们用键盘敲入的空格或回车,因为用 或
无论white-space设置什么都会有空格或回车。)
完全实例 代码如下 复制代码
省略号 test
*{
margin:0;
padding:0;
}
body{
padding:10px;
font-family:Arial;
}
#test {
position:relative;
width:150px;
height:20px;
line-height:20px;
text-overflow:ellipsis;
white-space:normal;
*white-space:nowrap;
overflow:hidden;
border:1px solid #999;
}
#test span{
position:absolute;
top:0;
right:0;
display:block;
float:left;
}
#test span:after{content:"...";}
html 文字超出部分,CSS控制文字超出部分显示省略号方法相关推荐
- css 控制 段落 超出三行的部分显示...
css 控制 段落 超出三行的部分显示- 代码如下 <!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml&quo ...
- css控制文本超出省略(单行、两行、多行)
想要控制文本长度? 想要文本超出隐藏? 还想要不用JavaScript实现? 让我们来用css试试吧~ 本文重点 css控制文本超出省略.完成单行.两行.多行的效果 注意点 本文提到的方法 都需要控制 ...
- 纯css控制文字显示隐藏
纯css控制文字显示隐藏 用到css 伪类 :checked :checked 选择器匹配每个已被选中的 input 元素(只用于单选按钮和复选框). html <div class=" ...
- CSS控制文本超出打点显示
CSS控制文本超出打点显示 1 单行文本过长打点 2 多行文本打点显示 3 涉及的属性 3.1 white-space 3.2 text-overflow 1 单行文本过长打点 只有1行文本时,需要满 ...
- CSS控制文字的一些基本属性的使用
CSS控制文字的一些基本属性的使用: 一.CSS控制段落: 段落缩进:text-indent:20px; 文字方向:text-align:center; 文字修饰:text-decoration:un ...
- css 控制文字左右对齐
css 控制文字左右对齐: <p class="center">我是两端对齐文字端对齐文字<span></span></p> .ce ...
- css文字定位最右边,CSS 控制文字定位
CSS 控制文字定位 作者:不详 来源: 日期:2002-8-5 [code] P.double {line-height: 2} P.right {text-align: right} P.cent ...
- css超出两行省略号没效果,Css 设置超过再两行显示省略号
大部分场景都是超过一行就显示... {{item.name}} {{item.name}} export default { return { item: {name:'this is a very ...
- web前端培训:CSS中单行文本溢出显示省略号的方法
CSS中单行文本溢出显示省略号的方法你知道吗?在web前端技术学习中,这个问题其实是属于老生常谈了,因为css单行文本的应用是非常频繁的,比如网站最基本的文章列表,标题会很长,而显示列表的区域宽度却没 ...
最新文章
- 谷歌浏览器Google Chrome和Adobe Flash Plugins插件安装问题
- 【IT笔试面试题整理】连续子数组的最大和
- Python cv2 摄像头
- Windows Azure 数据安全(清理和泄漏)
- django 怎么加权限 静态资源目录_Django1.7如何配置静态资源访问
- python元素分类_Python练习 - 元素分类
- java web 之 WebRoot和WebContent目录
- Renting Boats
- java 产生随机数_java生成随机数
- Sklearn流水线交叉验证以及超参数网格交叉评估基础案例实战-大数据ML样本集案例实战...
- 【FlexSim2019】自学笔记:2019版本中传送带属性设置 | Use transport | 如何建立S连接 | 操作员 叉车 传送带
- 把书本上的字快速弄到电脑上
- #9733;如何解释特修斯之船问题?
- linux磁盘阵列 启动盘,Linux RAID磁盘列阵完全攻略
- JS如何删除节点和所有子节点
- 超文本链接html,什么是超文本链接超文本链接有什么用
- Redis远程连接不上解决办法
- 全球与中国能力和技能管理软件市场深度研究分析报告
- 数据库SQL实战(牛客网):获取员工其当前的薪水比其manager当前薪水还高的相关信息
- linux服务器安装mysql步骤详解
热门文章
- python爬取InterfaceLIFT壁纸,下载到本地,数据存入数据库(mysql,mongodb)
- 使用 Docker 和 Nginx 打造高性能二维码服务(二)
- windows下使用向日葵远程连接ubuntu显示连接已断开的解决方法
- PyTorch中BN层中新加的 num_batches_tracked 有什么用?
- 厉害了,我的京津冀!
- 北京VS上海:“活着为了工作”还是“工作为了生活”?
- 深创学院宝石院长受邀参加《FAF世链区块链大会》,并以区块链未来发展为主题发表演讲
- 一份基于SSM框架实现的支付宝支付功能,附完整源代码
- 你所不知道的MySQL数据库性能优化方案
- python 表情包 gif_Python从eif中导出qq表情的gif图片