单行超出显示省略号

直接看代码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>desktop demo</title><style>.app {width: 400px;height: 28px;line-height: 28px;margin: 50px 0 0 50px;border: 1px solid red;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;}</style>
</head>
<body><div class="app"><span class="content">你问我为何时常沉默，有的人无话可说，有的话无人可说.你问我为何时常沉默，有的人无话可说，有的话无人可说.</span></div>
</body>
</html>

效果图：

关键点：

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

多行超出显示省略号

直接看代码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>desktop demo</title><style>.content {display: -webkit-box;width: 400px;line-height: 1.5;margin: 50px 0 0 50px;border: 1px solid red;overflow: hidden;-webkit-box-orient: vertical;-webkit-line-clamp: 2;}</style>
</head>
<body><div class="app"><span class="content">你问我为何时常沉默，有的人无话可说，有的话无人可说.你问我为何时常沉默，有的人无话可说，有的话无人可说.</span></div>
</body>
</html>

效果图：

关键点：

display: -webkit-box;
overflow: hidden;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;

---------------------------(正文完)------------------------------------
一个前端的学习交流群，想进来面基的，可以点击这个logo，或者手动search群号：685486827

写在最后：约定优于配置-------软件开发的简约原则.
-------------------------------- (完)--------------------------------------

我的：
个人网站： https://neveryu.github.io/neveryu/
Github： https://github.com/Neveryu
新浪微博： https://weibo.com/Neveryu

更多学习资源请关注我的新浪微博…

CSS 超出部分显示省略号相关推荐

css超出隐藏显示省略号
width: 300px; overflow: hidden;/*超出部分隐藏*/ text-overflow:ellipsis;/* 超出部分显示省略号 */ white-space: nowrap ...
css 超出文字显示省略号
这里写自定义目录标题单行省略号多行省略号单行省略号直接上代码 <!DOCTYPE html> <html lang="en"> <head&g ...
CSS超出部分显示省略号
height: 76rpx; width: 300rpx; display: -webkit-box; /*设置为弹性盒子*/ -webkit-line-clamp: 2; /*最多显示3行*/ ov ...
css 超出隐藏显示省略号
以下三个需要配合使用: text-overflow: ellipsis; //字体超出用省略号显示 overflow:hidden; // 超出隐藏 white-space:nowrap // 不换行
css超出两行显示省略号
display: -webkit-box;-webkit-line-clamp:2;overflow: hidden;text-overflow: ellipsis;-webkit-box-orien ...
html 文字过多如何显示,当页面文字过多时，怎么用css使超出部分显示省略号？（单/多行代码演示）...
当一个页面文字过于冗长时,不仅不利于用户视觉上的感受,更不利于网站内的优化.那么我们怎么使用css超出部分显示省略号代替呢?本篇文章就给大家详细介绍css超出部分显示省略号怎么实现的?希望对有需要的朋 ...
css超出一行省略号:text-overflow和white-space超出隐藏显示省略号
css超出一行省略号:text-overflow和white-space超出隐藏显示省略号通过使用text-overflow和white-space属性来使文本在一行内显示,超出则加省略号,添加如下 ...
关于用css实现的文字超出部分显示省略号
文字超出部分显示省略号还是比较常用的一个效果,最近看到网上的一些方法亲自实践了一下,发现有些以前一些浏览器不能用的属性现在可以用了,于是研究了一番,现总结如下: 我们先来看下HTML代码: <d ...
CSS 文本超出两行显示省略号
// 文本超出两行显示省略号注:如果设置了弹性布局 display:flex; 那么下面的的css设置将不起作用div {width: 300px; overflow:hidden;text-ov ...

CSS 超出部分显示省略号

文章目录

单行超出显示省略号

多行超出显示省略号

CSS 超出部分显示省略号相关推荐

最新文章

热门文章