当在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. Java8系列之初识

    前言:终于有机会在工作中使用高版本的Java8,但是一直没有对java8中添加的新特性进一步了解过,所以趁着这个机会学习一下,能够在编程中熟练的使用. 一.接口的改变 我们知道,在java8版本以前, ...

  2. C# 使用HtmlAgilityPack抓取网页信息

    前几天看到一篇博文:C# 爬虫 抓取小说 博主使用的是正则表达式获取小说的名字.目录以及内容. 下面使用HtmlAgilityPack来改写原博主的代码 在使用HtmlAgilityPack之前,可以 ...

  3. LINUX 笔记-文本过滤

    ^                        只匹配行首 $                       只匹配行尾 *                        一个单字符后紧跟*,匹配0个 ...

  4. 如何透彻分析Java开发人员

    第一部分:对于参加工作一年以内的同学.恭喜你,这个时候,你已经拥有了一份Java的工作. 这个阶段是你成长极快的阶段,而且你可能会经常加班.但是加班不代表你就可以松懈了,永远记得我说的那句话,从你入行 ...

  5. 深入理解Java虚拟机--下

    深入理解Java虚拟机--下 参考:https://www.zybuluo.com/jewes/note/57352 第10章 早期(编译期)优化 10.1 概述 Java语言的"编译期&q ...

  6. await和async更多的理解

    最近有不少网友提起await和async,呵呵,C# 5引进的语法糖. 这个语法糖还真不好吃,能绕倒一堆初学的朋友,在网上也有很多网友关于这块知识点的争论,有对有错,今天在这里把这个误区好好讲讲. 在 ...

  7. MySQL索引（1）

    所有MySQL列类型都可以被索引,对相关列使用索引是提高SELECT操作性能的最佳途径.根据存储引擎可以定义 每个表的最大索引数和最大索引长度,每种存储引擎(如MyISAM.InnoDB.BDB.ME ...

  8. Ionic3 遇到的一些错误-submodule update -q --init --recursive

    解决方法: ionic start myTabs tabs --skip-deps cd .\myTabs cnpm install --save-dev ionic serve > npm i ...

  9. 移动端二三事【三】：transform的注意事项

    1.js操作transition时需使用驼峰命名: div.style.WebkitTransform = div.style.transform = "rotate(90deg)" ...

  10. 删除链表中倒数第n个节点

    给定一个链表,删除链表中倒数第n个节点,返回链表的头节点. 样例 给出链表1->2->3->4->5->null和 n = 2. 删除倒数第二个节点之后,这个链表将变成1 ...