当文字超出DIV宽度时，超出的文字部分省略，并用显示省略号代替，css代码如下：

div.ellipsis {

    padding-left: 5px;

    text-align: left;

    text-overflow:ellipsis;

    overflow: hidden;

    white-space: nowrap;

}

重要前提是DIV为固定宽度。
<end>

CSS实现超出DIV宽度文字自动隐藏并显示省略号的更多相关文章

  1. 解决html表格中内容超出不强制换行和超出宽度自动隐藏并显示省略号

    在表格布局中经常会遇到因为表格内容长短的变化导致布局混乱的情况,这个时候我们可能会有为了布局稳定把单元格宽度写死的情况:但是我们设置了宽度却发现超出了宽度之后会自动变大,用css定义元素的overfl ...

  2. Html内容超出标记宽度后自动隐藏

    我们在显示长文本时,往往需要去在C#端去截取字符,但这绝对不是一个好方面,因为我们的长文本往往都是代HTML标记的,你一个载不好,就会出现乱码问题(出现半个HTML标记),而比较好的作法就是通过CSS ...

  3. CSS——div内文字的溢出部分用省略号显示

    使得div内文字的溢出部分用省略号显示,可归纳为两种解决办法,一种方法是用CSS解决,另一种方法是js解决. 一.通过CSS控制显示 div内显示一行,超出部分用省略号显示 div内显示多行,超出部分 ...

  4. 微信小程序文字超过行后隐藏并且显示省略号

    在小程序开发过程中,经常会遇到一些数据无法在text中完全展示,所以会使用到隐藏相关文字,并在后方加上省略号(...). 只需要在对应的text中设置下面的css就可以了. overflow:hidd ...

  5. 如何利用CSS代码使图片和文字在同一行显示且对齐

    对于初学css的新手朋友来说,经常会遇到这样一个问题,当文字和图片出现在同一行或者同一个div里面的时候,在浏览器中运行出来的显示效果往往是在不同的行,那么,我们怎么才能利用CSS代码使图片和文字在同 ...

  6. CSS文本超出2行就隐藏并且显示省略号

    今天做东西,遇到了这个问题,百度后总结得到了这个结果. 首先,要知道css的三条属性. overflow:hidden; //超出的文本隐藏 text-overflow:ellipsis; //溢出用 ...

  7. css 文本超出容器长度后自动省略的方法!

    我们在给用户显示文本内容的时候,往往需要避免文本内容超出容器宽度,防止换行溢出,小弟在网上找了下发现网上的实现仅仅只是实现了用 ...省略了的功能! 而并没有获取光标提示的功能,所有小弟就结合网上的代 ...

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

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

  9. 超出div宽度范围的文字进行省略号省略，在鼠标移上去以后显示完整的内容

    一.前言 当我们在固定的范围内显示内容时,我们是希望能够完整显示的,然而往往事与愿违,文本会超出我们给定的范围,这时候怎么办呢? 二.超出范围,对文本进行省略号隐藏 先上图 代码很简单 div{ wi ...

随机推荐

  1. 从spring容器中取出注入的bean

    从spring容器中取出注入的bean 工具类,代码如下: package com.hyzn.fw.util; import org.springframework.beans.BeansExcept ...

  2. MySQL建表字段类型

    1.数据库:在MySQL中,要存储数据,必须从数据库开始,因此首先要创建数据库,但由于学校的MySQL服务器对学生数据帐号有限止,学生不得创建数据库,故每个学生的帐号中已事先由信息中心为大家建立了一个 ...

  3. poj_1084 剪枝-IDA*

    题目大意 给出一个由2*S*(S+1)构成的S*S大小的火柴格.火柴可以构成1x1,2x2...SxS大小的方格.其中已经拿走了几个火柴,问最少再拿走几个火柴可以使得这些火柴无法构成任何一个方格. 题 ...

  4. postgres模板数据库

    CREATE DATABASE 实际上是通过拷贝一个现有的数据库进行工作的.缺省时,它拷贝名为 template1 的标准系统数据库.所以该数据库是创建新数据库的"模板".如果你给 ...

  5. LeetCode——pow(x, n)

    超时了,只能先这么干了. return Math.pow(x, n);

  6. The 70th problem，UVa10396 Vampire Numbers

    今天看Thinking in Java看到一个吸血鬼数的问题,于是查找UVa里也有类似的问题就动手写了先是用Java写的,不过WA了两次,然后没有发现错误,又用c++写的还是不行.最后发现要排序去重. ...

  7. 腾讯云CMQ消息队列在Windows环境下的使用

    版权声明:本文由李少华原创文章,转载请注明出处: 文章原文链接:https://www.qcloud.com/community/article/100 来源:腾云阁 https://www.qclo ...

  8. 网页头部的声明应该是用 lang="";

    我们经常需要用缩写的代码来表示一种语言,比如用en表示英语,用de表示德语.ISO 639就是规定语种代码的国际标准.最早的时候,ISO 639规定的代码是,用两个拉丁字母表示一种语言,这被称为ISO ...

  9. 【BZOJ1692】[Usaco2007 Dec]队列变换 后缀数组+贪心

    [BZOJ1692][Usaco2007 Dec]队列变换 Description FJ打算带他的N(1 <= N <= 30,000)头奶牛去参加一年一度的“全美农场主大奖赛”.在这场比 ...

  10. c# 执行 CreateHandle() 时无法调用值 Dispose()

    在多线程C#开发中,遇到错误 执行 CreateHandle() 时无法调用值 Dispose().,这个错误是在关闭窗体的时候出来的. 原因是因为窗体还存在CreateHandle()事件,所以还不 ...