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).文字超出一行,省略超出部分,显示'...' 如果这种情况比较多,可以取一个切合作用的 ...
随机推荐
- Django(5) session登录注销、csrf及中间件自定义、django Form表单验证(非常好用)
一.Django中默认支持Session,其内部提供了5种类型的Session供开发者使用: 数据库(默认) 缓存 文件 缓存+数据库 加密cookie 1.数据库Session 1 2 3 4 5 ...
- C#博客记录一
前言:C#语言是由微软公司开发面向大众的一款软件开发语言. 1.c语音的输出语句为Console.Write();和Console.WriteLine(); 两者区别为后者为换行输出,前者不换行. 2 ...
- JUnit测试框架的使用
1.学习Junit框架的使用 可通过以下两个示例进行学习. A.Junit使用方法示例1 1)把Junit引入当前项目库中 新建一个 Java 工程—coolJUnit,打开项目coolJUnit 的 ...
- js.css嵌入dll
处理请求,返回 public ActionResult Get() { //传递一个部分名称 var n = Request["n"]; n = n.Replace('/', '. ...
- 在 Azure Web 应用中创建 Java 应用程序
本分步指南将通过 Azure Web 应用帮助您启动并运行示例 Java 应用程序.除 Java 外,Azure Web 应用还支持其他语言,如 PHP..NET.Node.JS.Python.Rub ...
- js 匹配中文字符串(也包含日文和韩文)
<script> var str="payTypeNam门诊账户\n\t"; document.write(str.match(/[\u4E00-\u9FA5\uF90 ...
- HTML代码中<%%>、<%=%>、<%:%>
<%%>之间可以写服务器端代码 比如 <% for(var i=0;i<10;i++){%> <%=%>获取后台的变量值,比如后台一个session[&quo ...
- git添加远程库基本操作
git添加远程库的基本步骤: 1.登录github,创建一个仓库,最好和本地仓库同名 2.输入git指令,把路径改成本地仓库所在盘符,如图 (project_03是我的本地仓库名称,路径是在G盘的WW ...
- CSS文字有关属性
font-size|family|weight|style 大小字体加粗斜体 color|opacity 颜色透明度 height+line-height:垂直居中 overflow:hidden|v ...
- 我为什么不用Django而用Flask?
前言 对于初学者来说,找到一个好的框架来学习或者项目开发都是非常有必要的,而当你有一定开发经验后,你应该选择适合当前业务需要的框架.我这里并不想探讨哪个框架好哪个不好,这个永恒的话题就跟探讨“世界上哪 ...