HTML超出文本显示省略号...通过text-overflow实现

HTML超出文本显示省略号在一些新闻列表中还是比较常见的一种做法，其实很简单通过text-overflow便可实现，有需要的朋友可以参考下本文

 

需要对div或者span同时应用Css：

复制代码
代码如下:

text-overflow:ellipsis;
white-space:nowrap;
overflow:hidden;

即可实现所想要得到的溢出文本显示省略号效果。
当然了你的页面元素要设置固定的宽度，超出了宽度才会显示。

时间： 2024-08-08 03:49:35

HTML超出文本显示省略号...通过text-overflow实现的相关文章

如何设置列表(li)超出部分显示省略号？

显示 我们常常希望列表中的内容,超过设置的长度的时候,不要撑开父元素,也不希望它直接换行:我们更愿意让其超过部分用省略号来代替.而在title标签中,置放的是完整的标题. 这样的方法新手们常常不知道该如何搞定.下面就是方法的演示.不过请注意此方法适用与IE与OP浏览器! 设置li超出部分显示省略号的方法 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml

CSS控制文字超出部分显示省略号方法

测试浏览器: IE6/7/8/9.opera12.02.firefox15.0.1.chrome  代码如下 复制代码 <p style="width:200px;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;">省略我吧 省略我吧! 省略我吧!省略我! </p> 如果我们要给p标签定义text-overflow:ellipsis就可以这么写:  代码如下 复制代码 p {      

css-纯CSS控制超出部分显示省略号

问题描述 纯CSS控制超出部分显示省略号 RT: 内容只有一行的时候可以控制,但是多行内容就没法了.怎么实现呢?求大神给点思路,实在没有C币,还望谅解. 解决方案 .title { overflow: hidden; font-size: 1.4rem; color: #000; display: -webkit-box; -webkit-line-clamp: 1; //控制行数 -webkit-box-orient: vertical; line-height: 1.8rem; height

appcan里面如何获取select选中文本 显示到其他text上

问题描述 appcan里面如何获取select选中文本 显示到其他text上 appcan里面的一个简单的select下拉选,如何将选中的文本显示到下面的text文本里面呢 解决方案 Javascript获取select的选中值和选中文本Javascript获取select的选中值和选中文本zepto获取select元素的选中值的文本

CSS超出文本用省略号显示 兼容firefox IE6 IE7

CSS设置文本溢出不显示或显示省略号,只显示一定长度的文本,ie9下只需设置  代码如下 复制代码 div{white-space:nowrap;text-overflow: none;} 或  代码如下 复制代码 div{white-space:nowrap;text-overflow: ellIPsis;} 即可,在ie6,ie7需增加宽度设置才能生效  代码如下 复制代码 div{white-space:nowrap;text-overflow: ellipsis;*width:100px

如何继续截取长文本显示省略号（多行）

记得第一篇博客写过单行文本溢出显示省略号,今天就来说说多行文本溢出怎么显示省略号吧 其实也是前些日子做移动端的页面接到这么个需求,本来以为这没法实现,同事跟我说-webkit-line-clamp属性可以,就去查了查,果然 Pc端基本不会有这种需求,因为这个方法兼容性太差,浏览器份额不是webkit占大头(特别是天朝),看前缀就知道只支持webkit内核,他属于webkit内部属性,和-webkit-text-size-adjust: none(这个Pc端已经不在支持,移动端还可以使用)类似,但

当内容超出最大的长度的时候，使用CSS使文本显示省略号

.description{  height:17px;  overflow:hidden;  text-overflow:ellipsis;  -webkit-text-overflow:ellipsis;  -o-text-overflow:ellipsis;  white-space:nowrap; }

css 溢出文本显示省略号各种方法总结

语法: text-overflow : clip | ellipsis 参数: clip : 不显示省略标记(...),而是简单的裁切 (clip这个参数是不常用的!) ellipsis : 当对象内文本溢出时显示省略标记(...) 说明: 设置或检索是否使用一个省略标记(...)标示对象内文本的溢出. 请您注意,text-overflow:ellipsis属性在FF中是没有效果的. 示例: div { text-overflow : clip; } text-overflow是一个比较特殊的样

Knockoutjs控制元素内文本显示的方法：text

Knockout控制元素内文本显示需要使用text绑定方法,此方法相当于在DOM中使用innerText将文本放入到元素中.使用的方法是: <div data-bind="text:myText"></div> 其中,myText可以是字符串.函数.表达式,只要最终返回的结果是字符串即可正常显示.下面列举一些相关例子. 字符串形式 <div data-bind="text:'小虾虎鱼'"></div> 注意:此方式在实