1.包含文字的元素必须是块级元素,不是块级元素使用display:block使其具有块级元素属性;

2.具备上述基本条件后,css样式如下:

{
display: block;
max-width: 300px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}

  如果包含在table的td元素内,td元素需要明确width的百分比,例如:width:20%;

CSS 文字超长省略显示并隐藏超长部分的更多相关文章

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

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

  2. CSS 文字溢出时的自动隐藏

    http://www.111cn.net/cssdiv/css/34050.htm 语法:overflow : visible | auto | hidden | scroll visible::不剪 ...

  3. jquery控制css的display属性(显示与隐藏)

    jquery控制div的显示与隐藏,很方便的. 例如: $("#id").show()表示display:block, $("#id").hide()表示dis ...

  4. css 文字超出部分显示省略号(原)

    单行超出省略号 #word1{width: 100px; text-overflow: ellipsis; overflow: hidden;} 几行超出省略号(只兼容webkit内核) #wordN ...

  5. css设置滚动条并显示或隐藏

    看效果,没有滚动条,超出div,开发中肯定不行. 有滚动条 最后就是想隐藏滚动条 代码 有滚动条并显示 <!DOCTYPE html> <html lang="en&quo ...

  6. css中有三个显示和隐藏的单词比较常见,display visibility 和 overflow我们需要区分开来

    display display 设置或检索对象是否及如何显示 display: none 隐藏对象与它相反的是display:block 除了转换为块级元素之外,同时还有显示元素的意思 特点: 隐藏之 ...

  7. css文字超出后显示...

    多行 overflow: hidden; //超出的文本隐藏 text-overflow: ellipsis; //溢出用省略号显示 display: -webkit-box; -webkit-lin ...

  8. js+css+div的点击后显示或者隐藏

    <html ><head><meta charset=utf-8 /><title>JS Bin</title></head>  ...

  9. CSS文字超出省略

    .ellipsis { white-space:nowrap overflow:hidden text-overflow:ellipsis }

随机推荐

  1. BZOJ2430 chocolate

    有一个显然的想法是因为最后要花分成n*m个小块,所以每条边一定是要被切开的. 所以直接排序就可以了qwq,按照代价从大到小切一定是最优的. #include<iostream> #incl ...

  2. jvisualvm_使用jmx连接远程linux应用

    [前提] JVisualVM是由Sun提供的性能分析工具,在Jdk6.0以后的版本中是自带的,如果是用Jdk1.5或以前版本的就得要单独安装了. [1]远程机器需要开启jmx 在使用jvisualvm ...

  3. [ActionScript 3.0] 通过BitmapData将对象保存成jpg图片

    此方法需要用到JPGEncoder.as和BitString.as这两个类,是将BitmapData对象转换成ByteArray,然后通过FileStream把此ByteArray写入到文件保存成jp ...

  4. [转] Linux 安装.src.rpm源码包的方法

    方法一:以setarch-1.3-1.src.rpm 软件包为例(可以到CSDN http://download.csdn.net/source/215173#acomment下载) 假设该文件已经存 ...

  5. 2018 noip AFO? 祭

    \(\color{#00ffff}{DAY \ \ -1}\) 一下午,都在说注意事项,也没刷题 学姐说,考前远离rqj,会被%,掉rp(雾 晚上8点20,内心有一丝悸动... 于是去找教练谈话 在教 ...

  6. TortoiseSVN查看修改时报错的解决方法

    提交Bug后很快就修复了,给Stefan点个赞.大家等新版本(1.11.1)发布就可以了. -------------------------分割线下是原文---------------------- ...

  7. Kafka:Consumer

    1.预览 1.1 消费者组(Consumer Group) 一个consumer group可能有若干个consumer实例 同一个group里面,topic的每条信息只能被发送到group下的一个c ...

  8. Pytorch学习笔记(二)——Tensor

    一.对Tensor的操作 从接口的角度讲,对Tensor的操作可以分为两类: (1)torch.function (2)tensor.function 比如torch.sum(a, b)实际上和a.s ...

  9. native excel 文件已经打开的判断

    book := TXLSWorkbook.Create; try then begin raise Exception.Create('请检查导入的文件是否存在或Excel已经处于打开状态(如果已经打 ...

  10. js Object.keys 用法

    Object.keys()   可以将对象里的所以的键取出来放到一个数组中 1.传入对象, 返回 包含对象可枚举属性和方法的数组 var obj = {'a': 'Beijing', 'b': 'Ha ...