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. PAT 1009. 说反话 (20) JAVA

    给定一句英语,要求你编写程序,将句中所有单词的顺序颠倒输出. 输入格式:测试输入包含一个测试用例,在一行内给出总长度不超过80的字符串.字符串由若干单词和若干空格组成,其中单词是由英文字母(大小写有区 ...

  2. Query on a tree——树链剖分整理

    树链剖分整理 树链剖分就是把树拆成一系列链,然后用数据结构对链进行维护. 通常的剖分方法是轻重链剖分,所谓轻重链就是对于节点u的所有子结点v,size[v]最大的v与u的边是重边,其它边是轻边,其中s ...

  3. VS清除打开项目时的TFS版本控制提示

    原文:http://blog.useasp.net/archive/2015/12/15/how-to-permanently-remove-vs-project-TFS-source-version ...

  4. sqlserver 通用分页存储过程

    来源:http://www.jb51.net/article/19936.htm CREATE PROCEDURE commonPagination ), --要显示的列名,用逗号隔开 ), --要查 ...

  5. 如何迁移Alwayson AG

    Windows cluster要求同一个cluster中的所有windows版本都是相同的,这样就出现一个问题,当我们要将对windows进行升级时,(例如从windows 2008 R2升级到win ...

  6. 扩展 easyui-tabs 插件 关闭标签页方法

    $.extend($.fn.tabs.methods,{ allTabs:function(jq){ var tabs = $(jq).tabs('tabs'); var all = []; all ...

  7. caffe的python接口学习(3):训练模型(training)

    如果不进行可视化,只想得到一个最终的训练model, 那么代码非常简单,如下 : import caffe caffe.set_device(0) caffe.set_mode_gpu() solve ...

  8. PAT 1067. Sort with Swap(0,*)

    1067. Sort with Swap(0,*) (25)   Given any permutation of the numbers {0, 1, 2,..., N-1}, it is easy ...

  9. PHP核心编程知识点

    一.PHP基本语法 PHP标记:一共有四种,只推荐使用第一种 语句结束符:分号 注释:行注释(//  #)和块注释(/*   */),注释的规范 二.常见的输出语句 print echo var_du ...

  10. spread语法解析与使用

    @[spread, javavscript, es6, react] Spread语法是ES6中的一个新特性,在需要使用多参数(函数参数).多元素(数组迭代)或者多变量(解构赋值)的地方使用sprea ...