当文字超出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. len()

    len() 用于统计序列的长度,字符串 .元组 .列表都属于序列 In [1]: str = "hello world" In [2]: len(str) Out[2]: 11

  2. 多进程模块：multiprocessing

    多进程: (1) 前面我们学习的多线程,其实算不上真正的多线程,即使你开了很多个线程,在同一时间内只能有一个CPU核数来处理一个线程(2) 在 python 中,多进程算得上是真正的多线程,假设你的C ...

  3. ARM承认芯片漏洞：披露修复细节

    在谷歌安全研究人员曝光了影响整个芯片产业的CPU设计漏洞后,ARM的Cortex系列处理器也未能逃过一劫.在一篇致开发者的博客文章中,该公司披露了三个已知漏洞的细节——其中两个与Spectre有关.第 ...

  4. 当div没有设置宽度，使用width的fit-content和margin:auto实现元素的水平居中

    当我们做水平居中的时候,会有许多方法,margin:0 auto,或者test-align:center,以及flex布局.当元素的width不固定的时候,我们如何实现水平居中呢,代码如下: < ...

  5. Extjs6.2.0搭建项目框架

    1.安装 首先你总要去官网下载ext-6.2.0-gpl.zip和安装Sencha CMD工具来管理ExtJs项目,ext-6.2.0-gpl.zip下载完成解压先放在一边,一会用到. Sencha ...

  6. android基础---->摄像头与相册的调用

    很多应用程序都可能会使用到调用摄像头拍照和从相册选取图片的功能,今天我们开始android中摄像头与相册调用的学习. 目录导航 调用摄像头拍照 从相册中选择照片 友情链接 调用摄像头拍照 大致流程:调 ...

  7. Excel 2010 统计行数

    1. 首先选择一个空行 2.然后点击如下:公式 --- 3. 第一行:填写“103”,当然我也不能明白为啥填写103.照做就是了. 4.鼠标定位到 第二行 “Ref1”位置,然后 鼠标+shfit 按 ...

  8. Android Processes and Threads

    Processes and Threads When an application component starts and the application does not have any oth ...

  9. 《转载》struts旅程《2》

    上一篇我们简单了解了struts原理,学习SSH,第一部是傻瓜式学习法,人家怎么做就跟着怎么做就ok.我们以登录为例,Struts配置步骤总结如下(如图2.1): 图2.2 1.          j ...

  10. 【BZOJ1269/1507】[AHOI2006]文本编辑器editor Splay

    [BZOJ1269][AHOI2006]文本编辑器editor Description 这些日子,可可不和卡卡一起玩了,原来可可正废寝忘食的想做一个简单而高效的文本编辑器.你能帮助他吗?为了明确任务目 ...