HTML(多行)文本超过部分隐藏,末尾显示(...)
HTML(多行)文本超过部分隐藏,末尾显示(...)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTML(多行)文本超过部分隐藏,末尾显示(...)</title>
</head>
<style>
/* 一行 */
.overline {
max-width: 200px;
display: inline-block;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
} /* 一行 */
.overline1 {
max-width: 200px;
display: -webkit-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
} /* 多行 */
.overline2 {
max-width: 200px;
display: -webkit-box;
-webkit-line-clamp: 2;/* 行数 */
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
}
</style>
<body>
<p class="overline">
演示演示演示演示演示演示演示演示演示演示演示演示
演示演示演示演示演示演示演示演示演示演示演示演示
演示演示演示演示演示演示演示演示演示演示演示演示
演示演示演示演示演示演示演示演示演示演示演示演示
</p> <p class="overline1">
演示演示演示演示演示演示演示演示演示演示演示演示
演示演示演示演示演示演示演示演示演示演示演示演示
演示演示演示演示演示演示演示演示演示演示演示演示
演示演示演示演示演示演示演示演示演示演示演示演示
</p> <p class="overline2">
演示演示演示演示演示演示演示演示演示演示演示演示
演示演示演示演示演示演示演示演示演示演示演示演示
演示演示演示演示演示演示演示演示演示演示演示演示
演示演示演示演示演示演示演示演示演示演示演示演示
</p>
</body>
</html>
HTML(多行)文本超过部分隐藏,末尾显示(...)的更多相关文章
- HTML中文本过长时自动隐藏末尾部分或中间等任意部分
一. 一般情况下,HTML字符串过长时都会将超过的部分隐藏点,方法如下: 设置CSS: .ellipsis-type{ max-width: 50px; ...
- 【CSS】隐藏多行文本框Textarea在IE中的垂直滚动栏
在<[CSS]禁止Google浏览器同意定义调整多行文本框>(点击打开链接)中已经提及过怎样使多行文本框Textarea在一些DOM2的浏览器中固定下来. 这不,多行文本框Textarea ...
- 使用 js 实现文本过多时隐藏部分文本
使用 js 实现文本过多时隐藏部分文本 情景描述: 有时候我们需要显示部分文字,就像 QQ 空间这样,先显示部分文字,加一个[查看全文],让用户选择是否查看全部 解决方法: 第一步:在一个 id 为 ...
- Delphi TMemo 可以显示、编辑多行文本
多行编辑框组件(TMemo)TMemo组件可以显示.编辑多行文本,是一个标准的Windows多行编辑组件.对一些比较多的文本内容可以利用TMemo组件来显示.编辑. 1.TMemo组件的典型用法 TM ...
- css如何实现多行文本时,内容溢出,出现省略号
一:单行文本出现省略号: .oneLine{ white-space: nowrap; text-overflow: ellipsis; overflow: hidden; width: 100px; ...
- DataGridView 行、列的隐藏和删除
) 行.列的隐藏 [VB.NET] ' DataGridView1的第一列隐藏 DataGridView1.Columns(0).Visible = False ' DataGridView1的第一行 ...
- sharepoint更新多行文本webparth
前台 <script> function Copy() { var value = document.getElementById("<%=BodyBox.ClientID ...
- 禁止多行文本框textarea拖拽
禁止多行文本框textarea拖拽: textarea { resize: none; } resize这个是用于元素缩放,它可以取以下几个值: none 默认值 both 允许水平方向及垂直方向缩放 ...
- JS控制文本框中的密码显示/隐藏功能
<html> <head> <title>[荐]JS控制文本框中的密码显示/隐藏功能_网页代码站(www.6a8a.com)</title> <s ...
随机推荐
- Shell环境变量文件
/etc/profile 系统级的初始化环境变量文件,由登录Shell调用执行 /etc/profile.d 当/etc/profile运行时,会调用该目录下的一些脚本 /etc/bashrc 每个交 ...
- vuex之Mutation(三)
说明 既然我们可以取出数据,就可以修改数据,而修改数据并不是像修改data的数据一样,直接 this.xxx = xxx,这样有一个问题,在实际开发中,state的数据一般会多个组件共享,如果可以使用 ...
- jmeter处理http请求Content-Type类型和传参方式
引言 我们在做接口测试的时候经常会忽略数据类型content-type的格式,以及参数Parameters和Body Data的区别和用途. 对于初次接触接口的同学来说,自己在发送一个http请求时, ...
- 使用PyCharm创建并运行一个Python项目
(1)首先,在欢迎界面点击“Create New Project”: (2)在“New Project“左侧面板点击”Pure Python“,右侧Location选择自己要创建项目的路径(一般情况, ...
- 《C语言》—— 数组详解
书籍使我变成了一个幸福的人,使我的生活变成轻松而舒适的诗.--高尔基 本文已经收录至我的GitHub,欢迎大家踊跃star 和 issues. https://github.com/midou-tec ...
- 内网ICMP隧道构建之icmpsh
下载地址: https://github.com/inquisb/icmpsh#usage kali下载 git clone https://github.com/inquisb/icmpsh.git ...
- [redis读书笔记] 第一部分 数据结构与对象 简单动态字符串
本读书笔记主要来自于<<redis设计与实现>> -- 黄键宏(huangz) redis主要设计了字符串,链表,字典,跳跃表,整数集合,压缩列表来做为基本的数据结构,实现键值 ...
- Mysql 初始化 及 密码管理
安装好mysql后,第一次初始化数据库 前言:启动mysql数据库最好不要使用root用户,而是使用mysql用户启动 官方解释: (永远不要使用root帐号启动MySQL Server.这样做很危险 ...
- Linux的那些事-系统启动(增加开机启动项)
1 /etc/init.d 2 /etc/inittab 3 /etc/rc.d/init.d 1. /etc/init.d 是一般开机的启动服务存放在这个目录下,至于实现机制,其实 ...
- [ERROR]pyodbc.ProgrammingError: ('42000', '[42000] [Microsoft][ODBC Driver 17 for SQL Server][SQL Server]SQL Server 阻止了对组件“xp_cmdshell”的 过程“sys.xp_cmdshell”的访问
环境: Windows 2012 R2 SQL Server 2014 通过MSSQL查询数据库服务器时间,报错如下: pyodbc.ProgrammingError: (', '[42000] [M ...