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

.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. ffmpeg学习（一）——在window7下编译ffmpeg

    FFmpeg是一个开源免费跨平台的视频和音频流项目,它提供了录制.转换以及流化音视频的完整解决方案.本文作者将尝试使用该库实现一个可适应复杂网络环境的, 支持标准rtsp协议的流媒体服务器.由于Vis ...

  2. solr特点二:Facet(1)

    一.   Facet 简介 Facet 是 solr 的高级搜索功能之一 , 可以给用户提供更友好的搜索体验 . 在搜索关键字的同时 , 能够按照 Facet 的字段进行分组并统计 . 二.   Fa ...

  3. Asp.NetCore安全验证之JWT

    本文只是介绍了下基于AspNetCore自带的System.IdentityModel.Tokens.Jwt.dll工具在项目中Token的应用. 我这里谈到的很浅显就两点: 一,超时时间 二,数据的 ...

  4. 洛谷P4586 [FJOI2015]最小覆盖双圆问题（最小圆覆盖）

    题面 传送门 前置芝士 最小圆覆盖 题解 我们按照\(x\)坐标排序,然后二分中间点,把点分成左右两边,对两边都做一个最小圆覆盖,那么半径大一点的那个就是答案了.然后对半径大的那一边继续二分就行了 然 ...

  5. Dubbo自定义日志拦截器

    前言 上一篇文章 Spring aop+自定义注解统一记录用户行为日志 记录了 web层中通过自定义注解配合Spring aop自动记录用户行为日志的过程.那么按照分布式架构中Dubbo服务层的调用过 ...

  6. Java_多线程

    线程(Thread) 1.线程是CPU进行资源调度的最小单位 2.线程是进程实际运行的单位,处理进程中无数的小任务 3.线程共享代码和数据空间 4.一个进程可以并发多个线程,线程之间切换系统开销很小 ...

  7. InfluxDB概念和基本操作 二

    InfluxDB概念和基本操作   InfluxDB基本概念 数据格式 在 InfluxDB 中,我们可以粗略的将要存入的一条数据看作一个虚拟的 key 和其对应的 value(field value ...

  8. Oracle数据库学习（四）：学习中的遇到的问题

    一.xhost图形化界面安装问题 问题1:运行xhost +命令,出现命令没有找到错误 原因:Linux系统没有安装xhost图形化包. 解决办法:安装xhost图形化包,命令如下: yum what ...

  9. Python 全栈开发：dict(字典)常用方法操作、dict嵌套

    数据类型的划分:可变数据类型和不可变数据类型. 不可变数据类型(可哈希):元祖.bool.int.str 可变数据类型(不可哈希):list.dict,set(集合) dict(字典): dict(字 ...

  10. Codeforces Round #555 (Div. 3) E. Minimum Array 【数据结构 + 贪心】

    一 题面 E. Minimum Array 二 分析 注意前提条件:$0 \le  a_{i} \lt n$ 并且 $0 \le  b_{i} \lt n$.那么,我们可以在$a_{i}$中任取一个数 ...