当在html中某个地方添加文本内容的时候如果内容过长我们会希望他超过一定宽度之后，其余的可以被截断，后面补充为省略号；

实现方式：

　　1、设置css样式为文本不换行；

　　2、位包裹文本的标签指定宽度；

　　3、设置自动隐藏超出的内容；

　　4、设置超出的文本使用省略号；

CSS代码如下：

     width: 200px;

     overflow: hidden;

     font-size: large;

     white-space: nowrap;

     text-overflow: ellipsis;

举个栗子：

<html>

    <head></head>

    <body style="padding: 20px;">

        <div style="width: 200px;overflow: hidden;font-size: large;white-space: nowrap;text-overflow: ellipsis;">

        你好，我是用来测试的文字，我现在可以出现省略号

        </div>

    </body>

</html>

运行效果：

OK！

css为超过一定宽度的文本内容自动加上省略号的更多相关文章

  1. CSS样式实现溢出超出DIV边框宽度高度的内容自动隐藏方法

    CSS样式实现溢出超出DIV边框宽度高度的内容自动隐藏方法 平时我们布局时候,有的文字内容多了会超过溢出我们限制的高度,有的图片会撑破DIV,让网页错位变乱. 这样我们就需要解决如何使用CSS来超出设 ...

  2. 设置UILabel可变高度（根据文本内容自动适应高度）

    @property(nonatomic)UILabel *showLabel;   // 计算文本所占高度,计算出来之后设置label的高度 // 第一个参数:字体大小,字体大小/样式影响计算字体的高 ...

  3. UGUI小技巧之Text随文本内容自动变化大小

    看了网上很多帖子,都是说在 Text 上面加上 Content Size Fitter 组件,并将对应的轴向改成 Preferred size 就可以实现 Text 大小随着文本内容自适应,如下图: ...

  4. css怎样让HTML中超出的内容显示为省略号

    文字超出了需要隐藏并显示省略号这个在工作中很多时候都要用到,我想很多人都碰到过吧,这个有两种解决方法第一种.用程序开截取字符长度,这个其实也是可以的.第二种就是接下来分享的内容,用css样式来做,话也 ...

  5. 设置HTML的TextArea标记跟随文本内容自动设置高度

    写内容的时候用的是textarea来写,可以换行,然后预览页面也要显示是换行才行,所以预览页面还是要用textarea来显示, 样式去掉边框,不可以拉伸,不可编辑 // html <textar ...

  6. HTML的TextArea标记跟随文本内容自动设置高度

    js <textarea name="textarea" id="textarea" style='overflow-y: hidden;height:2 ...

  7. Js文本溢出自动添加省略号ellipsis

    原文: ellipsis: function(value, len, word) {         //判断value有没有超过指定长度         if (value && v ...

  8. 让超出DIV宽度范围的文字自动显示省略号...

    关键是:text-overflow: ellipsis; div.titleholder { font-family: ms sans serif, arial; font-size: 8pt; wi ...

  9. CSS控制长文本内容显示(截取的地方用省略号代替)

    自动换行问题,正常字符的换行是比较合理的,而连续的数字和英文字符常常将容器撑大,下面介绍的是CSS如何实现处理的方法. 现实中经常出现一些内容比较长的文本,为了使整体布局美观,需要将文本内容控制在一行 ...

随机推荐

  1. 使用spark与MySQL进行数据交互的方法

    在项目中,遇到一个场景是,需要从Hive数据仓库中拉取数据,进行过滤.裁剪或者聚合之后生成中间结果导入MySQL. 对于这样一个极其普通的离线计算场景,有多种技术选型可以实现.例如,sqoop,MR, ...

  2. 做多了国际化项目，你怎么处理时区不同的各种blabla...问题

    我们做的的都是国际化大项目,今天发现了个大bug,没错!是时区不同引起的,如果你觉得这还不简单,这样,这样,再这样不就可以了吗?我只能呵呵了. 先来普及一下基础知识 : 1.地球分为24时区,北京位于 ...

  3. 视频加载logo 2

    推荐这个网站 http://www.flaticon.com/ http://www.flaticon.com/search?word=spinner  旋转图标 http://www.flatico ...

  4. Hibternate框架笔记

    Hibernate框架 配置 配置文件: <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE h ...

  5. IIS下自定义错误页面配置的两种方式（亲测可行）--IIS服务器

    网站自定义错误页面的设置,大家应该都知道它的重要性……不多说,下面带大家一步步在IIS下设置网站自定义错误页面…… 1.首先进入你的网站主页,找到[错误页](注意是IIS下的错误页不是.NET错误页) ...

  6. 2017 多校训练 1006 Function

    Function Time Limit: 4000/2000 MS (Java/Others)    Memory Limit: 131072/131072 K (Java/Others)Total ...

  7. Circle

    Circle   Memory Limit: 32768KB   64bit IO Format: %lld & %llu Status Description Your task is so ...

  8. 网络拓展知识 ACL NAT IPv6

    第1章 ACL 访问控制列表 访问控制表(”位代表精确匹配,而“1“位代表不许匹配. 例如路由器EIGRP的配置中: RouterA(config)#router eigrp 100 RouterA( ...

  9. ssh秘钥分发错误“/usr/bin/ssh-copy-id: ERROR: No identities found”

    在做ssh的时候出现下面的错误,这个错误根本没有遇到过啊,仔细一看,后面的端口不对,我要发到的服务器端口是22,我想肯定是这个原因,结果不加端口,还是提示 这个错误,于是咨询下其他人,结果发现要分发的 ...

  10. Web前端性能优化全攻略[转载]

    1. 尽量减少 HTTP 请求 (Make Fewer HTTP Requests) 作为第一条,可能也是最重要的一条.根据 Yahoo! 研究团队的数据分析,有很大一部分用户访问会因为这一条而取得最 ...