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

一般的文字截断(适用于内联与块):

.text-overflow {
    display:block;/*内联对象需加*/
    width:31em;
    word-break:keep-all;/* 不换行 */
    white-space:nowrap;/* 不换行 */
    overflow:hidden;/* 内容超出宽度时隐藏超出部分的内容 */
    text-overflow:ellipsis;/* 当对象内文本溢出时显示省略标记(...) ;需与overflow:hidden;一起使用。*/
}

对于表格文字溢出的定义:
对于表格超出范围显示省略号

table{
    width:30em;
    table-layout:fixed;/* 只有定义了表格的布局算法为fixed,下面td的定义才能起作用。 */
}
td{
    width:100%;
    word-break:keep-all;/* 不换行 */
    white-space:nowrap;/* 不换行 */
    overflow:hidden;/* 内容超出宽度时隐藏超出部分的内容 */
    text-overflow:ellipsis;/* 当对象内文本溢出时显示省略标记(...) ;需与overflow:hidden;一起使用。*/
}

需要你注意的是,这个CSS样式只对单行的文字的效,如果你想把它用在多行上,也只有第一行有作用的。 这个写法只有IE会有“...”,

其它的浏览器文本超出指定宽度时会隐藏。

以上问题可以解决:使用CSS如何控制文本换行?使用CSS如何控制文本不换行?使用CSS如何控制文本超出范围后显示省略号?使用CSS如何控制文本超出范围后隐藏?感谢您的光临~~~

CSS控制文本超出指定宽度后用省略号代替,CSS控制文本不换行的更多相关文章

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

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

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

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

  3. CSS- 文本超出指定宽度后隐藏并显示为省略号

    一般的文字截断(适用于内联与块): .text-overflow { display:block;/*内联对象需加*/ width:25em; word-break:keep-all;/* 不换行 * ...

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

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

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

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

  6. CSS文本超出指定行数省略显示

    单行: overflow: hidden; text-overflow: ellipsis; white-space: nowrap; 2行: font-size: 17px;overflow: hi ...

  7. Html内容超出标记宽度后自动隐藏

    我们在显示长文本时,往往需要去在C#端去截取字符,但这绝对不是一个好方面,因为我们的长文本往往都是代HTML标记的,你一个载不好,就会出现乱码问题(出现半个HTML标记),而比较好的作法就是通过CSS ...

  8. awk添加文本到指定内容后一行

    一下操作会输入到文件末尾,,测试不全面,还不如使用echo解决呢... 1. 要添加的文本内容如下: 文件名:code_list html</>!@$%^^ fdsafds <> ...

  9. css 超过标签定义的宽度后显示----

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

随机推荐

  1. Memcached 及 Redis 架构分析和比较

    Memcached和Redis作为两种Inmemory的key-value数据库,在设计和思想方面有着很多共通的地方,功能和应用方面在很多场合下(作为分布式缓存服务器使用等) 也很相似,在这里把两者放 ...

  2. MonoRail MVC应用(2)-构建多层结构的应用程序

    习惯了分层结构的.NET开发了,当然也是分层有优势,所以在使用MonoRail进行网站构建时,首先考虑到的问题就是MonoRail如何应对分层的结构.问题1:MonoRail在WEB层没有根目录,必须 ...

  3. Cocoapods的安装与使用

    一.安装 1.CocoaPods是用Ruby实现的,要想使用它首先需要有Ruby的环境.OS X系统默认已经可以运行Ruby了,因此我们只需执行以下命令: sudo gem install cocoa ...

  4. root运行chrome

    os:centos7 edit file : /usr/bin/google-chrome Add "--user-data-dir" (without the quotes) a ...

  5. Introduction to Machine Learning

    Chapter 1 Introduction 1.1 What Is Machine Learning? To solve a problem on a computer, we need an al ...

  6. 更改layout的布局

    创建了一个layout,缺省都是LinearLayout,原来都在xml把他改成其他布局,习惯了拖放的方式觉得挺麻烦. 其实vs2013有这个功能,就是在设计界面单机右键可以删除布局,然后拖一个布局进 ...

  7. 转:115个Java面试题和答案——终极列表(上)

    转自:http://www.importnew.com/10980.html 本文我们将要讨论Java面试中的各种不同类型的面试题,它们可以让雇主测试应聘者的Java和通用的面向对象编程的能力.下面的 ...

  8. Javascript 的类型转换之减号

    专职写JS已经有一个月了(对,没错就是一个月),从2014年11月24实习开始到今的2月份,我做的工作一直都是切图,另外跟着老板学产品,现在我一听到切图两字,我就想吐...所以我找了一份专职写JS的工 ...

  9. unity3d基础01

    Unity3d 五大视图: 1 Scene:存放hierarchy中创建的游戏对象,但实际只能看到一部分 *Scene浏览: ①右键进入“飞行模式”,方便查看整个场景 ②选中摄像机,按ALT进入浏览的 ...

  10. (spring-第14回【IoC基础篇】)国际化信息

    国际化又称为本地化. 当你把手机的language由中文切换到英文时,你的微信也相应改用英语,这就是i18n国际化.一般来说,应用软件提供一套不同语言的资源文件,放到特定目录中,应用根据不同语言的操作 ...