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(多行)文本超过部分隐藏,末尾显示(...)的更多相关文章

  1. HTML中文本过长时自动隐藏末尾部分或中间等任意部分

    一.    一般情况下,HTML字符串过长时都会将超过的部分隐藏点,方法如下: 设置CSS: .ellipsis-type{ max-width: 50px;                      ...

  2. 【CSS】隐藏多行文本框Textarea在IE中的垂直滚动栏

    在<[CSS]禁止Google浏览器同意定义调整多行文本框>(点击打开链接)中已经提及过怎样使多行文本框Textarea在一些DOM2的浏览器中固定下来. 这不,多行文本框Textarea ...

  3. 使用 js 实现文本过多时隐藏部分文本

    使用 js 实现文本过多时隐藏部分文本 情景描述: 有时候我们需要显示部分文字,就像 QQ 空间这样,先显示部分文字,加一个[查看全文],让用户选择是否查看全部 解决方法: 第一步:在一个 id 为 ...

  4. Delphi TMemo 可以显示、编辑多行文本

    多行编辑框组件(TMemo)TMemo组件可以显示.编辑多行文本,是一个标准的Windows多行编辑组件.对一些比较多的文本内容可以利用TMemo组件来显示.编辑. 1．TMemo组件的典型用法 TM ...

  5. css如何实现多行文本时,内容溢出,出现省略号

    一:单行文本出现省略号: .oneLine{ white-space: nowrap; text-overflow: ellipsis; overflow: hidden; width: 100px; ...

  6. DataGridView 行、列的隐藏和删除

    ) 行.列的隐藏 [VB.NET] ' DataGridView1的第一列隐藏 DataGridView1.Columns(0).Visible = False ' DataGridView1的第一行 ...

  7. sharepoint更新多行文本webparth

    前台 <script> function Copy() { var value = document.getElementById("<%=BodyBox.ClientID ...

  8. 禁止多行文本框textarea拖拽

    禁止多行文本框textarea拖拽: textarea { resize: none; } resize这个是用于元素缩放,它可以取以下几个值: none 默认值 both 允许水平方向及垂直方向缩放 ...

  9. JS控制文本框中的密码显示/隐藏功能

    <html> <head> <title>[荐]JS控制文本框中的密码显示/隐藏功能_网页代码站(www.6a8a.com)</title> <s ...

随机推荐

  1. Shell环境变量文件

    /etc/profile 系统级的初始化环境变量文件,由登录Shell调用执行 /etc/profile.d 当/etc/profile运行时,会调用该目录下的一些脚本 /etc/bashrc 每个交 ...

  2. vuex之Mutation(三)

    说明 既然我们可以取出数据,就可以修改数据,而修改数据并不是像修改data的数据一样,直接 this.xxx = xxx,这样有一个问题,在实际开发中,state的数据一般会多个组件共享,如果可以使用 ...

  3. jmeter处理http请求Content-Type类型和传参方式

    引言 我们在做接口测试的时候经常会忽略数据类型content-type的格式,以及参数Parameters和Body Data的区别和用途. 对于初次接触接口的同学来说,自己在发送一个http请求时, ...

  4. 使用PyCharm创建并运行一个Python项目

    (1)首先,在欢迎界面点击“Create New Project”: (2)在“New Project“左侧面板点击”Pure Python“,右侧Location选择自己要创建项目的路径(一般情况, ...

  5. 《C语言》—— 数组详解

    书籍使我变成了一个幸福的人,使我的生活变成轻松而舒适的诗.--高尔基 本文已经收录至我的GitHub,欢迎大家踊跃star 和 issues. https://github.com/midou-tec ...

  6. 内网ICMP隧道构建之icmpsh

    下载地址: https://github.com/inquisb/icmpsh#usage kali下载 git clone https://github.com/inquisb/icmpsh.git ...

  7. [redis读书笔记] 第一部分 数据结构与对象 简单动态字符串

    本读书笔记主要来自于<<redis设计与实现>> -- 黄键宏(huangz) redis主要设计了字符串,链表,字典,跳跃表,整数集合,压缩列表来做为基本的数据结构,实现键值 ...

  8. Mysql 初始化 及 密码管理

    安装好mysql后,第一次初始化数据库 前言:启动mysql数据库最好不要使用root用户,而是使用mysql用户启动 官方解释: (永远不要使用root帐号启动MySQL Server.这样做很危险 ...

  9. Linux的那些事-系统启动（增加开机启动项）

    1   /etc/init.d 2   /etc/inittab 3   /etc/rc.d/init.d  1.   /etc/init.d 是一般开机的启动服务存放在这个目录下,至于实现机制,其实 ...

  10. [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 ...