css-文本超出后显示省略号
1、如果是单行文本:
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
2、如果是多行文本,将文本框高度设为文字行高的倍数,然后在文本后建一个content为“...”的宽度为1em并设置文本背景色的after伪类,相对文本框设置绝对位置为下0右0;这样可以在视觉上实现同样的省略效果。
3、或者直接在文本框后新建一个元素,比如

这个右下角显示详情,并且是个链接,可以新建一个链接,然后绝对位置右0下0,记着设置背景色。
网上还有其他高大上的方法,继续学习。
css-文本超出后显示省略号的更多相关文章
- CSS——文本超出隐藏显示省略号
文本超出隐藏显示省略号 1.单行文本的溢出显示省略号 overflow: hidden; text-overflow:ellipsis; white-space: nowrap; // overflo ...
- css文本超出隐藏显示省略号
p style="width: 300px;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;"> 如 ...
- CSS3 文本超出后显示省略号...
纯用CSS实现,主要采用代码 overflow:hidden; text-overflow:ellipsis;//这是让文本溢出后,显示成省略号. white-space:nowrap;//禁止自动换 ...
- css 文本超出范围显示省略号
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- css文字超出自动显示省略号
只针对单行文本有效: 01.针对块状元素 ul li{ width: 180px; text-overflow: ellipsis; white-space: nowrap;/*禁止自动换行*/ ov ...
- CSS文本溢出,显示省略号(...)
方式1:这种方式就是必须要跟width搭配使用,当你使用的display:flex; 的时候可能会影响样式 width: 200px; overflow: hidden; /*超出部分隐藏*/ tex ...
- css设置内容超出后显示省略号
1.使用overflow: hidden把超出的内容进行隐藏: 2.然后使用white-space: nowrap设置内容不换行: 3.最后使用text-overflow: ellipsis设置超出内 ...
- css兼容大部分浏览器的文本超出部分显示省略号
css之字体多行省略(兼容大部分浏览器) 字体单行显示省略号 <style> .box1{ width: 500px; height: 1.5em; overflow: hidden; t ...
- CSS实现不换行/自动换行/文本超出隐藏显示省略号
在写页面的时候,我们经常会需要用到关于文本的换行,强制换行以及显示几行超过显示省略号等,今天我们就对这些问题来做个汇总吧! 1.自动换行 div{ word-wrap:break-word; word ...
- css文本溢出隐藏显示省略号(单行+多行)
文本超出若干行就换行,这个功能几乎每个文本浏览网站都会用到,实现它的办法也有很多,今天简单的介绍一下实现它的方法. 一. 单行文本不换行,并将超出文本隐藏 .box-content{ ove ...
随机推荐
- python的高级特性3:神奇的__call__与返回函数
__call__是一个很神奇的特性,只要某个类型中有__call__方法,,我们可以把这个类型的对象当作函数来使用. 也许说的比较抽象,举个例子就会明白. In [107]: f = abs In [ ...
- C语言操作文件
#include <stdio.h> struct stu{ ]; int num; int age; ]; }boya[],boyb[]; struct stu *pa,*pb; mai ...
- SQL Server之游标的基础知识
什么是游标: 游标是可以在结果集中上下游动的指针. 游标的作用: --允许定位到结果集中的特定行. --从结果集的当前位置检索一行或多行数据. --支持对结果集中当前位置的行进行修改. 注意:游标虽然 ...
- Easyui Tree方法扩展 - getLevel(获取节点级别)
Easyui Tree一直就没有提供这个方法,以前没有用到,所以一直没怎么在意,这次自己用到了,顺便扩展了一个方法,分享给大家. $.extend($.fn.tree.methods, { getLe ...
- 协程python
python中协程 在引出协成概念之前先说说python的进程和线程. 进程: 进程是正在执行程序实例.执行程序的过程中,内核会讲程序代码载入虚拟内存,为程序变量分配空间,建立 bookkeeping ...
- salt基本原理
转载自: 来自:http://tech.mainwise.cn/?p=438 说明:salt是一个异构平台基础设置管理工具(虽然我们通常只用在Linux上),使用轻量级的通讯器 ...
- sql 2012 提示列名无效 但可以执行问题
笔者目前使用Ctrl+Shift+R可以解决这个问题,因为智能感知的问题,需要重新整理一下intellisense.有其他方法,请园友共享一下,谢谢. VS2012及13都有用到智能感知,而在sql里 ...
- 判断 JS 中对象的类型
1.typeof 形如 var x = "xx"; typeof x == 'string' typeof(x) 返回类型有:'undefined' “string” 'numbe ...
- 【算法之美】求解两个有序数组的中位数 — leetcode 4. Median of Two Sorted Arrays
一道非常经典的题目,Median of Two Sorted Arrays.(PS:leetcode 我已经做了 190 道,欢迎围观全部题解 https://github.com/hanzichi/ ...
- 通向高可扩展性之路(WhatsApp篇)---- 脸书花了190亿买来的WhatsApp的架构
原文链接:http://highscalability.com/blog/2014/2/26/the-whatsapp-architecture-facebook-bought-for-19-bill ...