Css实现...省略号的效果

本文分为单行省略号的实现和多行省略号的实现

介绍：我们无论写练习或者写项目的时候，像用户名字过长或者文本信息过长需要用到省略号的效果，特此总结一下用法

1、单行省略号

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>省略号的实现</title><style>*{margin: 0;padding: 0;}div{width: 200px;height: 20px;}</style>
</head>
<body><div>样式小白是小白样式小白是小白样式小白是小白样式小白是小白样式小白是小白</div>
</body>
</html>

像这种情况，我们一看就会溢出

是叭，我们给div加上overflow：hidden会隐藏掉，但是不太美观就需要用到省略号

给div加上如下样式

        div{width: 200px;height: 20px;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;}

效果就达到了

2、多行省略号

还是先写基础代码，我们这次的div高度要大一些

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>省略号的实现</title><style>*{margin: 0;padding: 0;}div{width: 200px;height: 60px;}</style>
</head>
<body><div>样式小白是小白样式小白是小白样式小白是小白样式小白是小白样式小白是小白样式小白是小白</div>
</body>
</html>

假设我们要把它变成三行省略

div样式

        div{width: 200px;height: 60px;-webkit-line-clamp:3; //固定三行省略好display: -webkit-box; // 旧版弹性盒子-webkit-box-orient:vertical; // 主轴垂直overflow: hidden; // 隐藏}

效果：

Css实现...省略号的效果相关推荐

css overflow 省略号,图文详解CSS文本溢出显示省略号效果（text-overflow）
在工作中经常会遇到文本溢出,需要显示省略号的情况,那这个省略号是怎么实现的呢?这篇文章就给大家讲讲CSS中如何用text-overflow实现超出部分显示省略号.对CSS文字溢出加省略号这个知识不熟悉 ...
antd table 超出显示省略号无效果
antd table 超出显示省略号无效果我是用的css 去做的,具体方法,如下图 {title: "表头",dataIndex: "key",onCell: ...
纯CSS制作的图形效果
纯CSS制作的图形效果很少会有人意识到,当浏览器绘制的border,会有一个角度的问题.我们就是得用这样的一个技巧来制作三角的效果.我们只需要保证一边的边框是有色,其他边框色为透明色,这样我们就很容 ...
css实现tab切换效果
<div class="match-instruction"><div id="tab2" class="mi-cont" ...
不可思议的纯 CSS 实现鼠标跟随效果
不可思议的纯 CSS 实现鼠标跟随效果原文:不可思议的纯 CSS 实现鼠标跟随效果直接进入正题,鼠标跟随,顾名思义,就是元素会跟随着鼠标的移动而作出相应的运动.大概类似于这样: 通常而言,CSS ...
php3d按钮,CSS实现3D按钮效果
这次给大家带来CSS实现3D按钮效果,CSS实现3D按钮效果的注意事项有哪些,下面就是实战案例,一起来看一下. css巧妙利用了box-shadow来实现3D物体的立体感,当按钮按下的时候再去修改bo ...
[css] 用css实现倒影的效果
[css] 用css实现倒影的效果 box-reflect 个人简介我是歌谣,欢迎和大家一起交流前后端知识.放弃很容易, 但坚持一定很酷.欢迎大家一起讨论主目录与歌谣一起通关前端面试题
[css] 使用css实现彩虹的效果
[css] 使用css实现彩虹的效果 <!DOCTYPE html> <html lang="en"> <head><meta chars ...
[css] 使用css实现蒙版的效果
[css] 使用css实现蒙版的效果 filter: blur(1px) 个人简介我是歌谣,欢迎和大家一起交流前后端知识.放弃很容易, 但坚持一定很酷.欢迎大家一起讨论主目录与歌谣一起通关前端面 ...

Css实现...省略号的效果

Css实现...省略号的效果相关推荐

最新文章

热门文章