当在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. 【转】地址空间、内核空间、IO地址空间

    http://blog.csdn.net/wuxinke_blog/article/details/8769131 有这么一系列的问题,是否在困扰着你:用户程序编译连接形成的地址空间在什么范围内?内核 ...

  2. MySQL show processlist说明

    html { font-family: sans-serif } body { margin: 0 } article,aside,details,figcaption,figure,footer,h ...

  3. Java基础总结--泛型总结

    -----泛型------JDK1.5出现的机制1.泛型出现的原因--简化书写,提高安全性技术的由来是为了解决问题,现在存在该问题,所有的容器定义类型为Object,所以任何对 象均可以放入容器--进 ...

  4. LeetCode 104. Maximum Depth of Binary Tree （二叉树的最大深度）

    Given a binary tree, find its maximum depth. The maximum depth is the number of nodes along the long ...

  5. python常用模块上篇

    python常见模块 分两篇分别介绍下述模块 time模块 random模块 hashlib模块 os模块 sys模块 logging模块 序列号模块 configparser模块 re模块 time ...

  6. 最全的命令行（gradle）打包安卓apk

    最近研究安卓方面的打包,因为是React Native,不能使用Android studio打包.找了半天资料,发现没有一个全面的.下面,我来讲解自己下打包时自己遇到的各种坑. 1.首先,需要在项目顶 ...

  7. pandas.DataFrame学习系列1——定义及属性

    定义: DataFrame是二维的.大小可变的.成分混合的.具有标签化坐标轴(行和列)的表数据结构.基于行和列标签进行计算.可以被看作是为序列对象(Series)提供的类似字典的一个容器,是panda ...

  8. ubuntu 常用软件安装

    安装ubuntu远程图形界面 sudo apt-get install xrdp (sudo apt-get install ..  用于安装软件的命令 ) sudo apt-get install ...

  9. zookeeper启动异常

    zookeeper启动报异常 java.io.EOFException  at java.io.DataInputStream.readInt(DataInputStream.java:392) 遇到 ...

  10. PaaS 调研:GAE与 AWS（上）

    欢迎大家前往腾讯云社区,获取更多腾讯海量技术实践干货哦~ 作者:韩伟 起因 PaaS作为"云"的概念,已经流行了很久.从使用的角度上看,似乎就是:写一个PHP,然后可以直接传到服务 ...