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 固定长度 超出长度 显示省略号的更多相关文章

  1. css控制标题长度超出部分显示省略号

    width: 50px; overflow:hidden;white-space:nowrap; text-overflow:ellipsis; 设置或检索是否使用一个省略标记(...)标示对象内文本 ...

  2. css 超出部分显示省略号

    代码: overflow: hidden; white-space: nowrap;  text-overflow: ellipsis; 重点代码:text-overflow: ellipsis; 解 ...

  3. CSS实现单行、多行文本超出部分显示省略号

     单行文本超出,代码如下: css代码: <style> .one{ width:200px; overflow: hidden; text-overflow:ellipsis; whit ...

  4. Table组件设置文字超出宽度显示省略号,鼠标悬停以悬浮框显示

    一.设置文字超出宽度显示省略号 注意点: 1.  需要指定column的width属性,否则列头跟内容可能不对齐.需要留一列不设置宽度以适应弹性布局. 2. 列宽度width必须大于ellipsis的 ...

  5. HTML5 元素文字超出部分显示省略号(支持多行),兼容几乎所有常用浏览器

    1,公共样式,在公共的 CSS 文件中加入以下内容  /* 超出部分显示省略号,支持多行 */ .text-ells:before { content: ''; float: left; width: ...

  6. css文字超出自动显示省略号

    只针对单行文本有效: 01.针对块状元素 ul li{ width: 180px; text-overflow: ellipsis; white-space: nowrap;/*禁止自动换行*/ ov ...

  7. JS控制文字只显示两行,超出部分显示省略号

    由于使用css控制文字只显示多行,超出部分显示省略号,存在一定的兼容性问题,所以总结了一下网上一些大咖使用js实现控制行数的解决方案. 第一步:依次引入jquery.js+jquery.ellipsi ...

  8. css文本强制两行超出就显示省略号,不显示省略号

    1. 强制一行的情况很简单 overflow:hidden; //超出的隐藏 text-overflow:ellipsis; //省略号 white-space:nowrap; //强制一行显示 2. ...

  9. CSS——文本超出隐藏显示省略号

    文本超出隐藏显示省略号 1.单行文本的溢出显示省略号 overflow: hidden; text-overflow:ellipsis; white-space: nowrap; // overflo ...

  10. css限制显示字数,文字长度超出部分用省略号表示【转】

    为了保证页面的整洁美观,在很多的时候,我们常需要隐藏超出长度的文字.这在列表条目,题目,名称等地方常用到. (1).文字超出一行,省略超出部分,显示'...' 如果这种情况比较多,可以取一个切合作用的 ...

随机推荐

  1. AtCoder Grand Contest 023 F - 01 on Tree

    Description 题面 Solution HNOI-day2-t2 复制上去,删点东西,即可 \(AC\) #include<bits/stdc++.h> using namespa ...

  2. 浅谈C#中HttpWebRequest与HttpWebResponse的使用方法

    1.第一招,根据URL地址获取网页信息get方法 public static string GetUrltoHtml(string Url,string type) { try { System.Ne ...

  3. tomcat一个IP绑定多个域名,不同域名访问不同的应用

    修改conf文件夹下面的server.xml的Engine里面的内容即可原始内容如下: …… <Engine name="Catalina" defaultHost=&quo ...

  4. oracle UDT 有关数据字典的研究

    1.数据及类型准备 创建了一个自定义类型 create or replace type addr_type as object( street varchar2(30); city varchar2( ...

  5. DOM 和 BOM

    DOM 和  BOM DOM: DOM= Document Object Model,文档对象模型,DOM可以以一种独立于平台和语言的方式访问和修改一个文档的内容和结构.换句话说,这是表示和处理一个H ...

  6. 五校联考模拟赛Day2T2矩阵(容斥原理)

    题意 $n * m$的网格,对其进行黑白染色,问每一行每一列至少有一个黑格子的方案数. Sol 考场上只会$n^3$的dp,还和指数级枚举一个分qwq 设$f[i][j]$表示到了第$i$行,已经有$ ...

  7. sublime Error executing: /usr/bin/security dump-trust-settings -d

    sublime text2突然crash,无法简单粗暴的关闭,就开始认真解决这个问题. 问题: 参考文献:https://github.com/wbond/package_control/issues ...

  8. Android仿QQ界面

    最近这几天,一直跟着朋友们聚会什么的,没怎么做项目,今天总算是有时间开电脑继续做我的项目了.下面我就把我做的效果展示一下. 这是模仿了qq的界面效果.因为代码比较长就不粘贴代码了.需要的小伙伴可以跟我 ...

  9. Mybatis 的多个数据源

    主要思路: DataSource --> SqlSessionFactory --> SqlSessionTemplate 第一方式: 定义多套  DataSource --> Sq ...

  10. App Inventor 网络资源及推荐书目

    Ai2服务器 官方服务器:http://ai2.appinventor.edu/ 官方备用服务器:(大陆可用):http://contest.appinventor.mit.edu/ 国内个人服务器: ...