html 固定长度 超出长度 显示省略号
a{
width: 80px;/* 要显示文字的宽度 */
float: left;/* 左对齐,不设置的话只在IE下好用 */
overflow: hidden; /* 超出的部分隐藏起来 */
white-space: nowrap;/* 不显示的地方用省略号...代替 */
text-overflow: ellipsis;/* 支持 IE */
-o-text-overflow: ellipsis;/* 支持 Opera */
}
例:
<div style="display: inline-block;overflow: hidden;width: 50px;word-break: keep-all;white-space: nowrap;text-overflow: ellipsis;line-height: 28px;float: left;">dfdsfdsfffffffffffffffffffff</div>
html 固定长度 超出长度 显示省略号的更多相关文章
- css控制标题长度超出部分显示省略号
width: 50px; overflow:hidden;white-space:nowrap; text-overflow:ellipsis; 设置或检索是否使用一个省略标记(...)标示对象内文本 ...
- css 超出部分显示省略号
代码: overflow: hidden; white-space: nowrap; text-overflow: ellipsis; 重点代码:text-overflow: ellipsis; 解 ...
- CSS实现单行、多行文本超出部分显示省略号
单行文本超出,代码如下: css代码: <style> .one{ width:200px; overflow: hidden; text-overflow:ellipsis; whit ...
- Table组件设置文字超出宽度显示省略号,鼠标悬停以悬浮框显示
一.设置文字超出宽度显示省略号 注意点: 1. 需要指定column的width属性,否则列头跟内容可能不对齐.需要留一列不设置宽度以适应弹性布局. 2. 列宽度width必须大于ellipsis的 ...
- HTML5 元素文字超出部分显示省略号(支持多行),兼容几乎所有常用浏览器
1,公共样式,在公共的 CSS 文件中加入以下内容 /* 超出部分显示省略号,支持多行 */ .text-ells:before { content: ''; float: left; width: ...
- css文字超出自动显示省略号
只针对单行文本有效: 01.针对块状元素 ul li{ width: 180px; text-overflow: ellipsis; white-space: nowrap;/*禁止自动换行*/ ov ...
- JS控制文字只显示两行,超出部分显示省略号
由于使用css控制文字只显示多行,超出部分显示省略号,存在一定的兼容性问题,所以总结了一下网上一些大咖使用js实现控制行数的解决方案. 第一步:依次引入jquery.js+jquery.ellipsi ...
- css文本强制两行超出就显示省略号,不显示省略号
1. 强制一行的情况很简单 overflow:hidden; //超出的隐藏 text-overflow:ellipsis; //省略号 white-space:nowrap; //强制一行显示 2. ...
- CSS——文本超出隐藏显示省略号
文本超出隐藏显示省略号 1.单行文本的溢出显示省略号 overflow: hidden; text-overflow:ellipsis; white-space: nowrap; // overflo ...
- css限制显示字数,文字长度超出部分用省略号表示【转】
为了保证页面的整洁美观,在很多的时候,我们常需要隐藏超出长度的文字.这在列表条目,题目,名称等地方常用到. (1).文字超出一行,省略超出部分,显示'...' 如果这种情况比较多,可以取一个切合作用的 ...
随机推荐
- phpstorm一些简单配置
1.字体大小和行间距 2.设置编码:包括编辑工具编码和项目编码
- MVC类库视图在UI使用方法
在类库中固定文件:Controller Views 引用一下两个程序集(类库和UI项目都需要引用)(似乎只需要引用mvc的,build似乎在引用文件中不见了?有空测试一下) 如此方式,一个登录需要是 ...
- glyphicons-halflings-regular.woff2 文件 404
搜索了下,果然是因为mine没有配置的原因. http://stackoverflow.com/questions/32300578/how-to-remove-error-about-glyphic ...
- jQuery三——筛选方法、事件
一.jquery常用筛选方法 以下为jquery的常用筛选方法: 代码示例如下: <!DOCTYPE html> <html lang="en"> < ...
- js动画杂记
在画布上做动画 方法有 setIntervel(function(){},time); setTimeout(function(){},time); 新方法 window.requestAnimati ...
- java参数传递之值传递
一 概述 1.什么是参数传递? 调用方法时向形参传递数据的过程叫做参数传递.在编程语言中有两种传递方式:值传递与引用传递.必须强调的是,这里提到的两种传递方式不是仅限于java使用到的传递方式,而是出 ...
- ArcGIS Geodabase OBJECTID重新初始编号的间接方法
ArcGIS Geodabase OBJECTID为Long型,随着Feature的增加和删除自动编号,均为增加.即删除Feature后,再增加该号码自动只增加不重新编号. 间接方法可以实现重新从1编 ...
- Android 判断当前Fragment是否可见(Visible)
判断当前Fragment是否可见 public abstract class BaseFragment extends Fragment { /** Fragment当前状态是否可见 */ prote ...
- C/C++函数指针,指针函数的用法,用处
先看函数指针 int func2(int x); /* 声明一个函数 */ int (*q2) (int x); /* 声明一个函数指针 */ q2=func2; /* 将func函数的首地址 ...
- Asio基本接口
Asio是C++的网络库,有boost和非boost这两种版本,这里涉及的都是非boost的版本.Asio官方文档 在使用Asio时可以只包含头文件asio.hpp,如果知道所用接口具体在哪个头文件中 ...