文本溢出-超出文本显示为省略号
时间:2022-05-04
本文章向大家介绍文本溢出-超出文本显示为省略号,主要内容包括实现文本超出显示为省略号、单行文本超出显示为省略号、多行文本超出显示为省略号、何时考虑超出隐藏、基本概念、基础应用、原理机制和需要注意的事项等,并结合实例形式分析了其使用技巧,希望通过本文能帮助到大家理解应用这部分内容。
HTML5学堂:本文当中我们主要为大家讲解如何实现文本超出显示为省略号;同时讲解一下,在网页开发与制作的时候,我们什么时候应该考虑内容撑开宽高,又应该在何时考虑文本超出的问题。
实现文本超出显示为省略号
使用CSS实现元素的文本超出隐藏,通常存在两种方式,一种是超出直接隐藏内容,另一种是超出显示为省略号。
超出隐藏
超出隐藏,只需要为一个有固定宽高设置为overflow:hidden;
单行文本超出显示为省略号
实现代码如下:
<style>
.text-overflow {
width: 400px;
height: 40px;
line-height: 20px;
/*如下为超出隐藏显示为省略号的核心代码*/
overflow: hidden; /* 内容超出宽度时隐藏超出部分的内容 */
text-overflow: ellipsis; /* 当对象内文本溢出时显示省略标记(...) ;需与overflow:hidden;一起使用。*/
word-break: keep-all; /* 不换行 */
white-space: nowrap; /* 不换行 */
}
</style>
<div class="text-overflow">HTML5学堂:本文当中我们主要为大家讲解如何实现文本超出显示为省略号;同时讲解一下,在网页开发与制作的时候,我们什么时候应该考虑内容撑开宽高,又应该在何时考虑文本超出的问题。</di
多行文本超出显示为省略号
多行文本超出显示为省略号的需求,仅仅使用HTML和CSS就很难实现了。通常我们可以使用JS辅助进行实现。看如下案例:
<style>
.text-overflow {
width: 400px;
line-height: 20px;
}
</style>
<div class="text-overflow" id="con">HTML5学堂:本文当中我们主要为大家讲解如何实现文本超出显示为省略号;同时讲解一下,在网页开发与制作的时候,我们什么时候应该考虑内容撑开宽高,又应该在何时考虑文本超出的问题。</div>
<script>
var con = document.getElementById('con');
var textCon = con.innerHTML;
con.innerHTML = textCon.substring(0, 49) + '…';
</script>
基本原理很简单:通过innerHTML获取元素的内容,之后使用字符串方法进行截取,截取前49个字符,之后,在这49个字符之后连接一个“...”,最后,将这个截取后的字符串赋值给原来的元素内容即可。
何时考虑超出隐藏
通常是在考虑后台对前端影响的时候,要针对超出部分进行处理。很多时候数据是从后台传到前端页面当中的,那么有时有些地方内容会比较多,有些地方内容会比较少。针对这种情况我们做个简单的整理:
1 对于img元素的父级标签,需要设置超出隐藏;
2 对于列表页的标题和内容描述部分,通常需要针对超出进行设置。多行的内容描述部分需要设置超出隐藏;单行的列表页标题,可以设置超出隐藏或超出显示为省略号;
3 对于内容页的标题和内容,千万不要随意设置固定高度,也不要设置超出隐藏。
本文章共耗时1.5小时,责任小编:HTML5学堂-利利。
- PostQueuedCompletionStatus
- tomcat源码解读四 tomcat中的processer
- tomcat源码解读三(2) tomcat中JMX的源码分析
- 程序的入口
- tomcat源码解读三(1) tomcat的jmx管理
- 利用xinetd实现简单web服务器(镜像站)
- tomcat源码解读二 tomcat的生命周期
- IOCP反射服务器
- 给PHP开发者讲讲PHP源码-第二部分
- 给PHP开发者讲讲PHP源码-第一部分
- tomcat源码解读一 Digester的解析方式
- Markdown 语法说明(简体中文版)
- C++中_onexit()用法简述
- tomcat请求处理分析(六)servlet的处理过程
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 笔试编程 | 二分查找、数组、排序
- Spark SQL解析查询parquet格式Hive表获取分区字段和查询条件
- Apache Hive
- SAUI-关于input滚动问题
- 学好Spark必须要掌握的Scala技术点
- EF Linq中的左连接Left Join查询
- dotnet 删除自身程序的方法
- Roslyn 读取 PackageReference 的版本号和内容
- Web开发中的时区问题
- 编写代码生成器的一些问题与思考
- 和小曼一起走到MySQL行的尽头
- 明亮解我“工厂模式无用”之惑
- 「源码分析」— 为什么枚举是单例模式的最佳方法
- 如何记忆 Spring Bean 的生命周期
- 系统学习Stream