1、如果是单行文本:

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

2、如果是多行文本,将文本框高度设为文字行高的倍数,然后在文本后建一个content为“...”的宽度为1em并设置文本背景色的after伪类,相对文本框设置绝对位置为下0右0;这样可以在视觉上实现同样的省略效果。

3、或者直接在文本框后新建一个元素,比如

这个右下角显示详情,并且是个链接,可以新建一个链接,然后绝对位置右0下0,记着设置背景色。

网上还有其他高大上的方法,继续学习。

css-文本超出后显示省略号的更多相关文章

  1. CSS——文本超出隐藏显示省略号

    文本超出隐藏显示省略号 1.单行文本的溢出显示省略号 overflow: hidden; text-overflow:ellipsis; white-space: nowrap; // overflo ...

  2. css文本超出隐藏显示省略号

    p style="width: 300px;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;"> 如 ...

  3. CSS3 文本超出后显示省略号...

    纯用CSS实现,主要采用代码 overflow:hidden; text-overflow:ellipsis;//这是让文本溢出后,显示成省略号. white-space:nowrap;//禁止自动换 ...

  4. css 文本超出范围显示省略号

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  5. css文字超出自动显示省略号

    只针对单行文本有效: 01.针对块状元素 ul li{ width: 180px; text-overflow: ellipsis; white-space: nowrap;/*禁止自动换行*/ ov ...

  6. CSS文本溢出,显示省略号(...)

    方式1:这种方式就是必须要跟width搭配使用,当你使用的display:flex; 的时候可能会影响样式 width: 200px; overflow: hidden; /*超出部分隐藏*/ tex ...

  7. css设置内容超出后显示省略号

    1.使用overflow: hidden把超出的内容进行隐藏: 2.然后使用white-space: nowrap设置内容不换行: 3.最后使用text-overflow: ellipsis设置超出内 ...

  8. css兼容大部分浏览器的文本超出部分显示省略号

    css之字体多行省略(兼容大部分浏览器) 字体单行显示省略号 <style> .box1{ width: 500px; height: 1.5em; overflow: hidden; t ...

  9. CSS实现不换行/自动换行/文本超出隐藏显示省略号

    在写页面的时候,我们经常会需要用到关于文本的换行,强制换行以及显示几行超过显示省略号等,今天我们就对这些问题来做个汇总吧! 1.自动换行 div{ word-wrap:break-word; word ...

  10. css文本溢出隐藏显示省略号(单行+多行)

    文本超出若干行就换行,这个功能几乎每个文本浏览网站都会用到,实现它的办法也有很多,今天简单的介绍一下实现它的方法.  一. 单行文本不换行,并将超出文本隐藏 .box-content{     ove ...

随机推荐

  1. Js倒计时程序

    Js倒计时程序 点击下载

  2. xhprof使用笔记(非原创)

    [作用] xhprof是facebook开源的一个php性能分析工具. [安装] xhprof扩展的安装: wget   http://pecl.php.net/get/xhprof-0.9.2.tg ...

  3. MVC 多级目录(控制器) 路由重写 及 多级Views目录 的寻找视图的规则

    转自:[原]Asp.net Mvc   多级控制器 路由重写 及 多级Views目录 的寻找视图的规则 asp.net mvc 为了更好的控制views的页面存放,和控制器的可读性,需要分开多级目录来 ...

  4. Windows 8.1 新增控件之 AppBar

    Windows 8.1 与Windows 8 相比已经有了很多改进,从ITPro 角度这篇文章<What's New in Windows 8.1>已经表述的很详细.对开发者来说,最明显的 ...

  5. Caffe学习系列(23):如何将别人训练好的model用到自己的数据上

    caffe团队用imagenet图片进行训练,迭代30多万次,训练出来一个model.这个model将图片分为1000类,应该是目前为止最好的图片分类model了. 假设我现在有一些自己的图片想进行分 ...

  6. 翻译qmake文档(一) qmake指南和概述

    翻译qmake文档 目录 英文文档连接: http://qt-project.org/doc/qt-5/qmake-manual.html http://qt-project.org/doc/qt-5 ...

  7. SQL基础之数据库快照

    1.认识快照 如名字一样,数据库快照就可以理解为数据库某一时刻的照片,它记录了此时数据库的数据信息.如果要认识快照的本质,那就要了解快照的工作原理.当我们执行t-sql创建快照后,此时就会创建一个或多 ...

  8. Hadoop简单安装配置

    Hadoop开始设计以Linux平台为运行目标,所以这里推荐在Linux发行版比如Ubuntu进行安装,目前已经有Hadoop for Windows出来,大家自行搜下文章. Hadoop运行模式分为 ...

  9. web安全——应用(java)

    简介 由于网络技术日趋成熟,黑客们也将注意力从以往对网络服务器的攻击逐步转移到了对web应用的攻击.据最新调查,信息安全有75%都发生在web应用而非网络层面. 场景 控制访问的权限.只让可以访问的访 ...

  10. 关于图像文章垂直无缝连接滚动——JS实现

    <!-- 作者:chenyehuacecil@163.com 时间:2015-02-04 描述:实现整篇文章从下到上的无缝连接滚动--><html xmlns="http: ...