样式:

{width: 160px; overflow: hidden; text-overflow:ellipsis; white-space: nowrap;}

说明:

white-space: nowrap 保证文本内容不会自动换行,如果多余的内容会在水平方向撑破单元格。

overflow: hidden 隐藏超出单元格的部分。

text-overflow: ellipsis 将被隐藏的那部分用省略号代替。

CSS实现内容超过长度后以省略号显示的更多相关文章

  1. css实现超出一行后用省略号显示

    css实现超出一行后用省略号显示 a{display:inline-block; text-overflow:ellipsis; white-space:nowrap; overflow:hidden ...

  2. android开发之当设置textview多少字后以省略号显示。限制TextView的字数

    设置多少字后以省略号显示 <TextView    android:id="@+id/tv"   android:layout_width="wrap_conten ...

  3. js和css实现内容超过边框,就自动省略,自动添加title

    在项目汇总,我们有这样的需求,如果内容多了,就自动省略,自动添加title 这个需要判断判断俩个值,一个是width(),一个是scrollWidth, 在div中,如果内容没有超过边框,这俩个值是一 ...

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

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

  5. 常用css样式(文字超出部分用省略号显示、鼠标经过图片放大、出现阴影)

    文字超出部分用省略号显示: white-space: nowrap; /* 不换行 */ overflow: hidden; /* 超出部分不显示 */ text-overflow: ellipsis ...

  6. table中超过长度的列,显示省略号

    <style type="text/css"> .table-ellipsis { table-layout: fixed; width: 100%; } .table ...

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

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

  8. CSS文字超出指定长度,用省略号

    overflow:hidden; text-overflow:ellipsis; white-space:nowrap; display: block;

  9. css 文本显示多行后用省略号显示剩余的

    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 5; overflow: hidden;      

随机推荐

  1. vagrant 1.8.6 安装过程及总结遇到的坑

    下面先总结遇到的问题,这些问题如果你也遇到,可能需要搜索很多次才能找到原因. 如果想看安装过程,可以先直接跳到后面第二部分部分. 1 问题汇总: 1.1 vagrant版本过高问题. vagrant ...

  2. salesforce 零基础学习(五十四)常见异常友好消息提示

    异常或者error code汇总:https://developer.salesforce.com/docs/atlas.en-us.api.meta/api/sforce_api_calls_con ...

  3. How to debug .NET Core RC2 app with Visual Studio Code on Windows?

    Simone Chiaretta (http://codeclimber.net.nz/archive/2016/05/20/How-to-debug-NET-Core-RC2-app-with-Vi ...

  4. 设计模式(十三):从“FQ”中来认识代理模式(Proxy Pattern)

    我们知道Google早就被墙了,所以FQ才能访问Google呢,这个“FQ”的过程就是一个代理的过程.“代理模式”在之前的博客中不止一次的提及过,之前的委托回调就是代理模式的具体应用.今天我们就从“F ...

  5. 学习Spring——依赖注入

    前言: 又开始动笔开了“学习Spring”系列的头…… 其实一开始写“学习SpringMVC”的几篇文章是出于想系统的了解下Spring以及SpringMVC,因为平时在公司中虽然每天都在使用Spri ...

  6. 前端CSS部分知识整理

    1.如何清除图片下方出现几像素的空白间隙? /*方法1:*/ img{display:block;} 方法2: /*img{vertical-align:top;}*/ 2.如何让文本垂直对齐文本输入 ...

  7. 使用java代码关闭指定端口的程序-windows

    转载请请在页首注明作者与出处 一:问题由史 今天遇到一个问题,就是在实现自动化灾备的时候,发现原有死掉的程序没有完全关闭,当然这都不是本文的重点,重点是这个时候,我得把它完全关闭,所以才有了这篇文章. ...

  8. CSS知识总结(三)

    CSS的常用样式 1.字体样式 1)字体名称(font-family) font-family  :  <family-name> 设置文字名称,可以使用多个名称,或者使用逗号分隔,浏览器 ...

  9. HTML基本元素(三)

    1.HTML特殊字符 一些字符在HTML中拥有特殊的含义,比如小于号(<)和大于号(>)用于定义HTML标签.如果我们希望浏览器正确地显示这些字符,我们必须在HTML源码中插入字符实体. ...

  10. 打造高效前端工作环境-tmuxinator

    前言  虽然tmux能让我们方便组织工作环境,但每次重新打开会话时都需要手动重新创建窗口.窗格和执行各种程序,能不能像VS那样以工程为单位保存窗口.窗格和各种所需执行的程序的信息呢?tmuxinato ...