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

.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. java的一些命名规范吧

    注意事项: 1.由于Java是面向对象编程的,所以在命名的时候尽量选择名词. 2.(Camel-Case)驼峰命名法:当变量名或函式名是由一个或多个单字连结在一起,而构成的唯一识别字时,首字母以小写开 ...

  2. DataGridView添加一行数据、全选、取消全选、清空数据、删除选中行

    .net 2005下的Windows Form Application,一个DataGridView控件和4个Button,界面设置如下:         代码如下,有注解,相信大家都看得明白:   ...

  3. Volo.Abp.EntityFrameworkCore.MySQL 使用

    创建新项目 打开 https://cn.abp.io/Templates ,任意选择一个项目类型,然后创建项目,我这里创建了一个Web Api 解压项目,还原Nuget,项目目录如下: 首先我们来查看 ...

  4. Polynomial （ Arithmetic and Algebra） CGAL 4.13 -User Manual

    1 Fundamentals A polynomial is either zero, or can be written as the sum of one or more non-zero ter ...

  5. CSS文字大小单位PX、EM的区别

    ◆px像素(Pixel)是相对长度单位,像素px是相对于显示器屏幕分辨率而言的.(引自CSS2.0手册)◆em是相对长度单位,相对于当前对象内文本的字体尺寸.如当前对行内文本的字体尺寸未被人为设置,则 ...

  6. Android 载入 HTML

    Android 中载入 HTML 有两种方式: 1. 用 TextView.setText(Html.fromHtml("<html></html>")); ...

  7. iOS Socket编程(一)基本概念

    1.Socket的解释 Socket翻译过来中文称为套接字, 这里我找到了一段比较官方的解释Socket是什么东西: Socket是通信的基石,是支持TCP/IP协议的网络通信的基本操作单元,包含进行 ...

  8. 【12c OCP】CUUG OCP认证071考试原题解析（36）

    36.choose the best answer View the Exhibits and examine the structures of the PRODUCTS, SALES, and C ...

  9. Nginx采用yum安装-Carr

    (1)使用yum安装nginx需要包括Nginx的库,安装Nginx的库 #rpm -Uvh http://nginx.org/packages/centos/7/noarch/RPMS/nginx- ...

  10. declare命令

    还是围绕以下几个问题进行学习; 1.declare是什么? 2.问什么要用declare? 3.怎样使用declare? 1.declare是什么? ♦declare应用的很多,向我们各种语言都会有声 ...