HTML技巧篇:如何让单行文本以及多行文本溢出显示省略号(…)
文章目录
- HTML技巧篇:如何让单行文本以及多行文本溢出显示省略号(…)
- 一、单行文本溢出显示省略号
- 核心css语句:
- 二、多行文本溢出显示省略号
- 核心css语句:
- 效果图:
- 总结
HTML技巧篇:如何让单行文本以及多行文本溢出显示省略号(…)
本篇文章主要给大家介绍一下在html页面中如何让单行文本以及多行文本溢出显示省略号(…)。
提示:以下是本篇文章正文内容,下面案例可供参考
一、单行文本溢出显示省略号
当我们在编写网页代码的时候,肯定会遇到过文字列表中的文字太多超出了我们所写的宽度,导致文本换行或者文本超出了界限,这时有人就会说了,让后台限制一下调用的文字个数不就行了吗,但是我们在做响应式的时候由于是百分比布局,无法计算一行会显示多少个文字,所以这并不是一个好的解决方案,我们使用css3就可以轻松的实现,而且简单好用。
核心css语句:
1、overflow:hidden; (顾名思义超出限定的宽度就隐藏内容)
2、white-space: nowrap; (设置文字在一行显示不能换行)
3、text-overflow: ellipsis;(规定当文本溢出时显示省略符号来代表被修剪的文本)
单行文本溢出较简单,本文章中不列出具体代码,读者自行实验。
二、多行文本溢出显示省略号
我们在编写网页代码时,有时候新闻列表页中新闻简介可能有一行或者多行,我们要如何处理这种问题,让其超出多行后还能显示省略号呢,不要慌,我们css还是很强大的,已经给我们提供了方法来处理这种问题了。
核心css语句:
1、-webkit-line-clamp:2; (用来限制在一个块元素显示的文本的行数,2表示最多显示2行。 为了实现该效果,它需要组合其他的WebKit属性)
2、display: -webkit-box; (和1结合使用,将对象作为弹性伸缩盒子模型显示 )
3、-webkit-box-orient:vertical;( 和1结合使用 ,设置或检索伸缩盒对象的子元素的排列方式 。)
4、overflow:hidden; (顾名思义超出限定的宽度就隐藏内容)
5、text-overflow: ellipsis;(规定当文本溢出时显示省略符号来代表被修剪的文本)
我们具体的代码效果演示就如下图所示:(超出2行的文字内容让其自动隐藏并显示…,并用js控制展开与关闭)
<!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"><script src="../jquery/jQuery.js"></script><script src="../bootstrap/js/bootstrap.min.js"></script><link href="../bootstrap/css/bootstrap.css" rel="stylesheet"><title>collapse</title><style>/* 三行文字 省略号 */.lookmoretop{overflow : hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; width: 300px; margin-top: 20px;margin-left: 10px;padding: 10px;border-radius: 25px 25px 0px 0px;background-color: rgba(204, 204, 204, 0.3);height: 68px; }/* 查看更多 */.lookmorebottom{display: block;border-radius: 0px 0px 25px 25px;background-color: rgba(204, 204, 204, 0.3);width: 320px; padding: 10px;margin-left: 10px;text-align: center;color: rgba(14, 14, 212, 0.61) }</style>
</head>
<body><div class="lookmoretop"><b>琵琶行</b> 白居易 〔唐代〕<br/>元和十年,予左迁九江郡司马。明年秋,送客湓浦口,闻舟中夜弹琵琶者,听其音,铮铮然有京都声。问其人,本长安倡女,尝学琵琶于穆、曹二善才,年长色衰,委身为贾人妇。遂命酒,使快弹数曲。曲罢悯然,自叙少小时欢乐事,今漂沦憔悴,转徙于江湖间。予出官二年,恬然自安,感斯人言,是夕始觉有迁谪意。因为长句,歌以赠之,凡六百一十六言,命曰《琵琶行》。浔阳江头夜送客,枫叶荻花秋瑟瑟。主人下马客在船,举酒欲饮无管弦。醉不成欢惨将别,别时茫茫江浸月。忽闻水上琵琶声,主人忘归客不发。.........莫辞更坐弹一曲,为君翻作《琵琶行》。感我此言良久立,却坐促弦弦转急。凄凄不似向前声,满座重闻皆掩泣。座中泣下谁最多?江州司马青衫湿。</div><a class="lookmorebottom">查看更多</a><script>let btn=document.querySelector(".lookmorebottom");let content=document.querySelector(".lookmoretop")var collapse=1;btn.addEventListener("click",()=>{if(collapse==1){content.style.webkitLineClamp="100";content.style.height='100%';btn.innerHTML="收起";}else{content.style.webkitLineClamp="3";content.style.height='68px';btn.innerHTML="查看更多";}collapse=-collapse;})</script>
</body>
</html>
效果图:
总结
好了,本篇文章就给大家说到这里,大家自己下来可以自己找例子写一下试一试到底能不能实现我们所说的效果,以后在写页面的的遇到这种问题的时候直接复制使用即可。
HTML技巧篇:如何让单行文本以及多行文本溢出显示省略号(…)相关推荐
- 单行文本和多行文本溢出显示省略号
1.单行文本溢出显示省略号 首先需要设置宽高 overflow: hidden; /*超出部分隐藏*/ text-overflow: ellipsis; /* 超出部分显示省略号 */ white-s ...
- CSS单行文本以及多行文本溢出显示省略号解决方案
CSS单行文本以及多行文本显示省略号解决方案 文章目录 CSS单行文本以及多行文本显示省略号解决方案 单行文本溢出显示省略号 多行文本溢出显示省略号 第一种效果:仅显示3行文本溢出部分显示省略号 第二 ...
- 单行文本和多行文本溢出以省略号显示方法
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- css多行超出显示点_CSS实现单行、多行文本溢出显示省略号(…)
如果实现单行文本的溢出显示省略号同学们应该都知道用text-overflow:ellipsis属性来,当然还需要加宽度width属来兼容部分浏览. 实现方法: overflow: hidden; te ...
- 如何设置省略号对其序号 html,CSS实现单行、多行文本溢出显示省略号(…)
最好用max-height来限制一下web 若是实现单行文本的溢出显示省略号同窗们应该都知道用text-overflow:ellipsis属性来,固然还须要加宽度width属来兼容部分浏览.浏览器 实 ...
- CSS基础: 单行和多行文本溢出显示省略号
文本溢出后很多,会显示一些省略号,这个在很多网站都会这样做,从技术层次来分析有两种,一种是前端通过css或者JavaScript进行进行,还有一种是后端传递文字的时候,本身处理完长度,然后返回一个嗲有 ...
- 关于单行和多行文本溢出显示省略号的解决方案
今天研究了一下文本溢出显示省略号的方案,在网上一搜,资料很多,但是不是所有都是正确的. 单行文本溢出: 1.使用text-overflow:ellipsis; 这种方法在除firefox的其他浏览器中 ...
- css之-单行文本溢出显示省略号,多行文本溢出显示省略号
单行显示省略号 white-spacing:nowrap; overflow:hidden; text-overflow:ellipsis; 规定某行显示省略号 -webkit-line-climp: ...
- css表格省略号,CSS 文本和表格中文字溢出显示省略号
一般的文字截断(适用于内联与块): .text-overflow { display:block;/*内联对象需加*/ width:31em; word-break:keep-all;/* 不换行 * ...
最新文章
- ipad4没有声音提示消息
- vue tree组件_使用Vue 3.0做JSX(TSX)风格的组件开发
- Oracle意外赢官司,程序员或过苦日子
- Python `__enter__` `__exit__`(with)
- Linux系统启动流程图
- android层叠卡片特效_LINE生日贺卡功能升级 快来试试私人生日贺卡 气球祝福特效...
- kubernetes资源对象--pod和job
- 娱乐先锋点歌系统服务器,娱乐先锋 K-LIVE 单机版安装和加歌说明.doc
- 《Mybatis 手撸专栏》第10章:使用策略模式,调用参数处理器
- Leetcode 颜色分类
- 蓝牙变成“未知USB设备”的解决方法
- vue + element-ui本地下载图片
- 山东大学计算机学院 论坛,计算机学院承办计算机学科发展高峰论坛_山东大学...
- js绑定事件和解绑事件的方法
- 在for循环中运行setTimeout的三种情况
- css选择器的优先级和权重问题
- 聂文涛桑黄子技术走过的文化之路
- 腾讯、阿里、百度、网易等18家中秋月饼设计盘点!(完整版)
- 如何用ae制作文字破碎效果
- Qt 查看Qt助手的方法
热门文章
- 《Learning Without Forgetting》(LWF)阅读笔记
- JAVA课程设计--石头剪刀布
- 云顶之弈机器人怎么拉人_云顶之弈机器人怎么玩 云顶之弈机器人搭配阵容推荐...
- java版商城源码之商家中心Spring Cloud+Spring Boot+mybatis+security+uniapp+Redis+MQ+VR全景+b2b2c多商家入驻前后端分离商城源码
- thinkPHP6 数据多条件批量更新
- 超详细!一文带你了解LVS四层负载均衡企业级实践!
- 下一代企业级SSD设计规范EDSFF详解
- 简易蔬菜大棚监测系统
- 计算机式表白方式,6种表白方法 有几种表白方式
- 连通性问题 强连通分量(SCC)