css 超出部分显示省略号
代码： overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
重点代码：text-overflow: ellipsis;
解释：简单理解就是我要把文本限制在一行（white-space: nowrap;），肯定这一行是有限制的(width)，并且你的溢出的部分要隐藏起来（overflow: hidden；），然后出现省略号（ text-overflow: ellipsis）。
text-ellipsis是一个特殊的样式，有关解释是这样的：text-overflow属性仅是注解，当文本溢出时是否显示省略标记。并不具备其它的样式属性定义。要实现溢出时产生省略号的效果还须定义：强制文本在一行内显示（white-space:nowrap）及溢出内容为隐藏（overflow:hidden），只有这样才能实现溢出文本显示省略号的效果。
<html>
<head>
<title> css 超出部分显示省略号</title>
</head>
<body>
<div id="div1" style="width: 100px; background: #ccc; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; ">省略号啊省略号啊省略号啊</div>
重点样式是 text-overflow: ellipsis; <br /> text-ellipsis是一个特殊的样式，有关解释是这样的：text-overflow属性仅是注解，当文本溢出时是否显示省略标记。并不具备其它的样式属性定义。要实现溢出时产生省略号的 效果还须定义：强制文本在一行内显示（white-space:nowrap）及溢出内容为隐藏（overflow:hidden），只有这样才能实现溢出文本显示省略号的效果。 简单理解就是我要把文本限制在一行（white-space: nowrap;），肯定这一行是有限制的(width)，并且你的溢出的部分要隐藏起来（overflow: hidden；），然后出现省略号（ text-overflow: ellipsis）。
</body>
</html>
css 超出部分显示省略号的更多相关文章
- css超出隐藏显示省略号怎么设置？
当我们在进行网页前端开发的时候,一般获取文章标题,然后一行一行的显示.但是当标题过长的时候,就会造成换行显示.还有显示部分文本信息时,如果全部显示就过于繁琐,会带来不会的网页体验感.虽然我们可以使用o ...
- CSS超出部分显示省略号…代码
让DIV,LI等元素超出部分文字用省略号…显示. 示例: 兼容IE/Firefox/Chrome 代码: display:block;white-space:nowrap; overflow:hidd ...
- css 超出部分显示省略号 汇总
单行: 加宽度 overflow: hidden; text-overflow:ellipsis; white-space: nowrap; 多行: display: -webkit-box; -we ...
- css超出部分显示省略号
单行文本 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF- ...
- CSS实现单行、多行文本超出部分显示省略号
单行文本超出,代码如下: css代码: <style> .one{ width:200px; overflow: hidden; text-overflow:ellipsis; whit ...
- css文字超出自动显示省略号
只针对单行文本有效: 01.针对块状元素 ul li{ width: 180px; text-overflow: ellipsis; white-space: nowrap;/*禁止自动换行*/ ov ...
- CSS——文本超出隐藏显示省略号
文本超出隐藏显示省略号 1.单行文本的溢出显示省略号 overflow: hidden; text-overflow:ellipsis; white-space: nowrap; // overflo ...
- css文本强制两行超出就显示省略号,不显示省略号
1. 强制一行的情况很简单 overflow:hidden; //超出的隐藏 text-overflow:ellipsis; //省略号 white-space:nowrap; //强制一行显示 2. ...
- Table组件设置文字超出宽度显示省略号，鼠标悬停以悬浮框显示
一.设置文字超出宽度显示省略号 注意点: 1. 需要指定column的width属性,否则列头跟内容可能不对齐.需要留一列不设置宽度以适应弹性布局. 2. 列宽度width必须大于ellipsis的 ...
随机推荐
- Android Handler传递参数动态更新UI界面demo
package com.example.demo_test; import android.app.Activity; import android.os.Bundle; import android ...
- js中鼠标滚轮事件详解
js中鼠标滚轮事件详解 (以下内容部分内容参考了http://adomas.org/javascript-mouse-wheel/ ) 之前js 仿Photoshop鼠标滚轮控制输入框取值中已使用 ...
- SQL Server 和Oracle 数据类型对应
SqlServer 2k转换为Oracle 10g 列名 SqlServer数据类型 SqlServer长度 Oracle数据类型 column1 bigint 8 NUMBER(19) column ...
- 一行很好的JS代码
[].forEach.call($$("*"),function(a){ a.style.outline="1px solid #"+(~~(Math.rand ...
- Junit使用教程（四）
一.会用Spring测试套件的好处 在开发基于Spring的应用时,如果你还直接使用Junit进行单元测试,那你就错过了Spring为我们所提供的饕餮大餐了.使用Junit直接进行单元测试有以下四大不 ...
- Ubuntu 64位系统安装StarUML之最佳实践
preview 相信很多使用Ubuntu的哥们在安装StarUML或者其他软件时都会遇到要求libgcrypt11的依赖.而遗憾的时,这个东西很多人根本找不到. 我将它分享到百度网盘,mark. 一. ...
- Qt之自定义界面（添加自定义标题栏）
简述 通过上节内容,我们实现了自定义窗体的移动,但是我们缺少一个标题栏来显示窗体的图标.标题,以及控制窗体最小化.最大化.关闭的按钮. 自定义标题栏后,所有的控件我们都可以定制,比如:在标题栏中添加换 ...
- 强势解决：windows 不能在本地计算机中起动Tomcat参考特定错误代码1
Tomcat添加系统服务:service.bat install 启动本服务的时候却提示“windows 不能在本地计算机中起动 Apache Tomcat参考特定错误代码1,若不是Microsoft ...
- nginx反向代理的简单配置
有两台机器A和B. A上边是nginx,B上边是tomcat. 现在要通过A的反向代理功能,通过A的nginx访问到B的tomcat. 首先tomcat已经配置好,并且正确启动,可访问. ...
- Web Api 中使用 PCM TO WAV 的语音操作
/// <summary> /// 语音[文件.上传.解码.保存(WAV)] /// </summary> [DeveloperEx("Liwei:秘书语音需求单&q ...