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. UNIX 版本

    一般UNIX系统都来源于AT&T公司的System V UNIX系统,BSD UNIX或其他类UNIX系统. System V UNIX:当今市场上大多数主要的商业UNIX系统都是基于AT&a ...

  2. 解决IDEA使用lombok注解无效,@Data不生效问题

    在settings设置启用注解即可:

  3. 使用visual studio 2013读取.mat文件

    现在有一个T.mat 文件需要在c++中处理然后以.mat 或是.txt形式返回 T．mat中存储了十个cell,每个cell中会有一个不等长的数组 1.以下是相关配置过程: 参考:http://we ...

  4. CenOS安装MySQL服务

    说明:本教程是CenOS安装MySQL服务. 0.    预备知识: 什么是rpm RMP 是 LINUX 下的一种软件的可执行程序,你只要安装它就可以了.这种软件安装包通常是一个RPM包(Redha ...

  5. 暑假第一周总结（在centos虚拟机上安装jdk以及hadoop并对hadoop进行配置）

    本周主要就是对虚拟机进行安装并在上边安装jdk以及hadoop并对其进行配置. 在看林子雨老师的教程时,下载了老师所给的全套的下载软件,在安装时发现老师所给的VirtualBox安装后无法正常启动,尝 ...

  6. 如何提取CSDN博客正文内容

    document.getElementById("article_content").outerHTML; 在任意的一片博文运行以上代码都可以获得正文内容,但是对于代码.字体都没有 ...

  7. QQ截图工具截取

    邮箱截图插件 TXGYMailCamera.dll(X86) Export: CameraWindow CameraSubArea CameraWindowLikeSpy 调用参数: rundll32 ...

  8. 如何用Flink把数据sink到kafka多个(成百上千)topic中

    需求与场景 上游某业务数据量特别大,进入到kafka一个topic中(当然了这个topic的partition数必然多,有人肯定疑问为什么非要把如此庞大的数据写入到1个topic里,历史留下的问题,现 ...

  9. 【Java并发工具类】ReadWriteLock

    前言 前面介绍过ReentrantLock,它实现的是一种标准的互斥锁:每次最多只有一个线程能持有ReentrantLock.这是一种强硬的加锁规则,在某些场景下会限制并发性导致不必要的抑制性能.互斥 ...

  10. Go语言实现：【剑指offer】替换空格

    该题目来源于牛客网<剑指offer>专题. 请实现一个函数,将一个字符串中的每个空格替换成"%20". 例如,当字符串为We Are Happy.则经过替换之后的字符串 ...