CSS多行省略的几种方法

显示一行文字，多余省略号:

.title {width: 100px;text-overflow: ellipsis;overflow: hidden;white-space: nowrap;
}

显示两行文字，多余省略号：
1、

.title {width: 100px;word-break: break-all;text-overflow: ellipsis;overflow: hidden;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 2; /* 这里是超出几行省略 */
}

2、双重伪元素方法：
一个显示… 一个设置为方块盖住点

3、使用伪元素设置一个背景渐变块，不显示省略号

.title:after {content: "";position: absolute;right: 0;bottom: 0;margin-bottom: 10px;width: 20%;height: 20px;background: linear-grandient(to right, ....):
}

CSS多行省略的几种方法相关推荐

CSS实现水平垂直的几种方法
title: CSS实现水平垂直的几种方法 categories: CSS tags: - CSS - HTML - 面试题 date: 2021-09-11 在HTMl中分为块级元素和内联元素, ...
CSS图片水平垂直居中的三种方法
CSS图片水平垂直居中的三种方法设置行高使用定位和translate 使用弹性盒子设置行高我们知道img元素为行内快元素,所以首先设置图片元素的父元素里文字水平居中,行高与整体高度一致. 其次 ...
python 命令-python解析命令行参数的三种方法详解
这篇文章主要介绍了python解析命令行参数的三种方法详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 python解析命令行参数主要有三种方法: ...
Notepad++去除代码行号的几种方法
Notepad++去除代码行号的几种方法 (转自:http://hi.baidu.com/beer_zh/item/e70119309ee587f2a8842892) 问:在网页中复制代码时,常常遇到 ...
在 Linux 命令行发送邮件的 5 种方法
转载来源 :在 Linux 命令行发送邮件的 5 种方法 :http://www.safebase.cn/article-259551-1.html 摘要: 当你需要在 shell 脚本中创建邮件时, ...
html div 居中心,CSS实现DIV居中的三种方法
下面给大家分享div居中的实现代码,具体代码如下所示: demo .div1{ width: 100px; height: 100px; border: 1px solid #000000;} .di ...
html如何将图片做成六边形,css画正六边形的两种方法
说下两种css 制作正六边形的方法. 先看一下结果: 在之前要先了解一下正六边形内角和边的关系,正六边形的每个内角是60deg,如图(√3其实是根号3): 方法一:原理把正六边形分成三部分,左中右分别 ...
html中怎么写正六边形,如何用css画正六边形？用css画正六边形的两种方法（代码实例）...
本章给大家介绍如何用css画正六边形?用css画正六边形的两种方法(代码实例).有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 在之前要先了解一下正六边形内角和边的关系,正六边形的每个 ...
CSS粘住底部的5种方法
CSS粘住底部的5种方法文章目录方法一:全局增加一个负值下边距等于底部高度方法二:底部元素增加负值上边距方法三:使用calc()计算内容的高度方法四:使用flexbox 方法五:使用grid ...

CSS多行省略的几种方法

CSS多行省略的几种方法相关推荐

最新文章

热门文章