html中省略号怎么打,Web中的省略号

在Web开发中，对于一种情况很常见。那就是，文本太长，而放置文本的容器不够长，而我们又不想让文本换行，所以，我们想使用省略号来解决这个问题。但是，在今天HTML的标准中并没有相关的标识或属性让你可以简单地完成这个事。但是我们可以使用CSS样式表来完成这个事，在IE，Safari，Chrome，Opera中都可以。但在Firefox中却不行，但我们可以使用jQuery来解决Firefox不兼容的问题。下面是相关的代码示例。

使用CSS设置省略号

overflow: hidden;

text-overflow: ellipsis;

-o-text-overflow: ellipsis;

white-space: nowrap;

width: 100%; overflow 属性是必需的，并且属性要是hidden。

white-space: nowrap 也是必需的。如果文本可以自动换行，就算是不可见，也不会有省略号的。因为文本换行了，所以没有超过容器的尺寸，所以也就不会有省略号了。

width属性仅在需要支持IE6时设置。设置成100%仅是为了解决IE6的不兼容问题。(关于IE中的那些不兼容问题，你可以参看本站的《9个最常见IE的Bug及其fix》)

text-overflow: ellipsis 就是设置省略号了。目前还不是HTML的标准规范。其是由IE引入的，可以在IE6+，Safari 3.2+和Chrome上工作。

-o-text-overflow: ellipsis 是 Opera 支持的。可以在 Opera 9.0+使用。

使用jQuery设置省略号

正如前面所说过的，Firefox并不支持CSS中的那些省略号设置，因为那并不是标准的HTML规范。所以，我们需要使用jQuery的Javascript来干这个事。你可以下载由Devon Govett写的jQuery 省略号插件，于是，你可以简单的把”ellipsis”赋给某些元件或是CSS定义，如下所示：

$(document).ready(function() {

$('.ellipsis').ellipsis();

}

或是

$("span").ellipsis();

html中省略号怎么打,Web中的省略号相关推荐

EasyExcel在项目中的应用-在web中导出带下拉框和批注的excel文件
前言好长一段时间没有更新博客了,最近刚刚找到实习工作,接触了企业中的项目,在这段时间的实习过程中,终于知道了企业级项目的体量和业务难度跟之前的小项目是完全不同的.10多天的适应期也逐渐让我找到了 ...
IDEA中新建项目Static Web 中没有vue.js
Maven学习总结(七)——eclipse中使用Maven创建Web项目
2019独角兽企业重金招聘Python工程师标准>>> Maven学习总结(七)--eclipse中使用Maven创建Web项目一.创建Web项目 1.1 选择建立Maven Pr ...
HTML5 Web app开发工具Kendo UI Web中图像浏览器的使用
2019独角兽企业重金招聘Python工程师标准>>> Kendo UI Web中的图像浏览器在默认的情况下会打开一个简单的对话框,如下图所示,方便用户键入或者是粘贴图片的URL以及 ...
Java Web中的Filter和Interceptor的区别
2019独角兽企业重金招聘Python工程师标准>>> 1.问题的来源项目中使用了Filter,进行白名单的控制,同时使用了Filter进行了跨域请求的控制,使用了Intercep ...
解析 WEB 中所有 URL 的简单牛B代码，先保存起来，方式将来找不到了
解析 WEB 中所有 URL 的简单牛B代码,先保存起来,方式将来找不到了 2011-11-22 16:48 by 通用信息化建设平台, 1471 ...
java web 中有效解决中文乱码问题-pageEncoding与charset区别, response和request的setCharacterEncoding 区别
java web 中有效解决中文乱码问题-pageEncoding与charset区别, response和request的setCharacterEncoding 区别参考文章: (1)java ...
Web中的积累：外观模式 Facade
摘要: 原创出处: http://www.cnblogs.com/Alandre/ 泥沙砖瓦浆木匠希望转载,保留摘要,谢谢! 壹前言目测好久没写文章了,距离上一篇文章也有二十多天.我是怎么了?哈 ...
ZedGraph在Web中的使用
上一篇SQL实现分组统计查询(按月.小时分组)中介绍了按月和小时为单位怎样实现分组查询,在本文中会实现将上文查询的结果以图表的形式显示在页面上.在页面上显示图标有很多种解决方案,office的owc组 ...
HTML5 Web app开发工具Kendo UI Web中Grid网格控件的使用
Kendo UI Web中的Grid控件不仅可以显示数据,并对数据提供了丰富的支持,包括分页.排序.分组.选择等,同时还有着大量的配置选项.使用Kendo DataSource组件,可以绑定到本地的J ...

html中省略号怎么打,Web中的省略号

html中省略号怎么打,Web中的省略号相关推荐

最新文章

热门文章