一般的文字截断（适用于内联与块）：

.text-overflow {

display:block;/*内联对象需加*/

width:25em;

word-break:keep-all;/* 不换行 */

white-space:nowrap;/* 不换行 */

overflow:hidden;/* 内容超出宽度时隐藏超出部分的内容 */

text-overflow:ellipsis;/* 当对象内文本溢出时显示省略标记(...) ；需与overflow:hidden;一起使用。*/

}

对于表格文字溢出的定义：

对于表格超出范围显示省略号

table{

width:25em;

table-layout:fixed;/* 只有定义了表格的布局算法为fixed，下面td的定义才能起作用。 */

}

td{

width:100%;

word-break:keep-all;/* 不换行 */

white-space:nowrap;/* 不换行 */

overflow:hidden;/* 内容超出宽度时隐藏超出部分的内容 */

text-overflow:ellipsis;/* 当对象内文本溢出时显示省略标记(...) ；需与overflow:hidden;一起使用。*/

}

如：

------------------------------------------------------------------------------------------------

如果想鼠标悬停省略号显示内容就 在title 那里写好即可~

代码：

<style type="text/css">

#div1{

         padding: 10px;

         width: 200px;

         height:30px;

         text-shadow: 3px 3px 3px #aaaaaa;

         border: 1px solid #999999;

         text-overflow: ellipsis;

         overflow: hidden;

         word-break: break-all;

         white-space: nowrap;

         }

</style>

<body>

<div id="div1" title="AAAAAAAAAAAAABBBBBBBBBBBBBCCCCCCCCCCCCCCDDDDDDDDDDDD">

          AAAAAAAAAAAAABBBBBBBBBBBBBCCCCCCCCCCCCCCDDDDDDDDDDDD

</div>

</body>

CSS- 文本超出指定宽度后隐藏并显示为省略号的更多相关文章

  1. CSS控制TD内的文本超出指定宽度后不换行而用省略号代替

    <style type="text/css"> .lineOverflow { width: 100px; border:#000 solid 1px; text-ov ...

  2. CSS控制文本超出指定宽度后用省略号代替，CSS控制文本不换行

    CSS控制文本超出指定宽度后用省略号代替,CSS控制文本不换行. 一般的文字截断(适用于内联与块): .text-overflow {     display:block;/*内联对象需加*/     ...

  3. CSS文本超出2行就隐藏并且显示省略号

    今天做东西,遇到了这个问题,百度后总结得到了这个结果. 首先,要知道css的三条属性. overflow:hidden; //超出的文本隐藏 text-overflow:ellipsis; //溢出用 ...

  4. css 文本超出n行就隐藏并且显示省略号

    首先,要知道css的三条属性. overflow:hidden; //超出的文本隐藏 text-overflow:ellipsis; //溢出用省略号显示 white-space:nowrap; // ...

  5. css文本超出2行就隐藏并显示省略号

    之前在网上看到过这样的代码,感觉有的时候还是挺有用的,故留个笔记. display:-webkit-box; //将对象作为弹性伸缩盒子模型显示. -webkit-box-orient:vertica ...

  6. css 文本超出2行就隐藏并且显示省略号

    overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; -webk ...

  7. CSS控制文本超出指定宽度显示省略号和文本不换行

    一般的文字截断(适用于内联与块): .text-overflow { display:block;/*内联对象需加 */ width:31em;/* 何问起 hovertree.com */ word ...

  8. CSS设置超出指定宽度自动换行

    一.背景 最近项目中有用到在div中显示用户反馈的信息,是指定宽度的div,超出要自动换行,开始写好后感觉应该没什么问题,后来自己随便输入测试数据的时候发现:如果是纯字母或者是纯数字就会出现超出了也不 ...

  9. css 文本超出容器长度后自动省略的方法!

    我们在给用户显示文本内容的时候,往往需要避免文本内容超出容器宽度,防止换行溢出,小弟在网上找了下发现网上的实现仅仅只是实现了用 ...省略了的功能! 而并没有获取光标提示的功能,所有小弟就结合网上的代 ...

随机推荐

  1. Visual Studio 2013的新特性介绍

    cnbeta新闻:微软正式发布Visual Studio 2013 RTM版,微软还发布了Visual Studio 2013的最终版本..NET 4.5.1以及Team Foundation Ser ...

  2. 知物由学 | AI网络安全实战：生成对抗网络

    本文由  网易云发布. “知物由学”是网易云易盾打造的一个品牌栏目,词语出自汉·王充<论衡·实知>.人,能力有高下之分,学习才知道事物的道理,而后才有智慧,不去求问就不会知道.“知物由学” ...

  3. RabbitMq初探——发布与订阅

    publish and subscribe 前言 前面的例子 我们都是用到的都是消息单一消费,即一条消息被单个消费者消费.像微博系统的消息推送,是一条消息推送给所有订阅到该频道的用户. 这里我们就需要 ...

  4. ssh 使用密钥无法登入Linux系统

    今天测试密钥登入linux系统时 出现如下问题: root@compute01:~# ssh alicxxx@xxx.com -p -i alickicxxxxxxx.key @@@@@@@@@@@@ ...

  5. java学习笔记—c3p0连接池与元数据分析（42）

    第一步:导入c3p0包 第二步:在classpath目录下,创建一个c3p0-config.xml <?xml version="1.0" encoding="UT ...

  6. ISE14.7生成.bit文件和mcs文件

    1.FPGA bit文件加载步骤(加载到FPGA的RAM中,用于在线调试,掉电丢失) 第一步:选择Tools->IMPCAT->选择OK: 第二步:双击Boundary Scan-> ...

  7. “全栈2019”Java异常第十九章：RuntimeException详解

    难度 初级 学习时间 10分钟 适合人群 零基础 开发语言 Java 开发环境 JDK v11 IntelliJ IDEA v2018.3 文章原文链接 "全栈2019"Java异 ...

  8. 关于gcd和exgcd的一点心得，保证看不懂（滑稽）

    网上看了半天……还是没把欧几里得算法和扩展欧几里得算法给弄明白…… 然后想了想自己写一篇文章好了…… 参考文献:https://www.cnblogs.com/hadilo/p/5914302.htm ...

  9. Pangolin库的使用

    使用Pangolin画出相机的轨迹(包括朝向). 数据集结构data.csv: #timestamp, p_RS_R_x [m], p_RS_R_y [m], p_RS_R_z [m], q_RS_w ...

  10. Linux 环境变量加强

    Linux 环境变量加强 # 前言 今天,主要是之前搭建 GO 环境包的使用发现自己对 Linux 环境变量还不是很熟悉. 遇到环境变量的问题还是会有些懵逼.所以,今天写点Linux 环境变量的文章, ...