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. Hyper-V虚拟机设置外部网络访问

    在Hyper-V管理器中新建一个虚拟交换机,类型为 内部 ,修改名称为 nat 在虚拟机的设置页面中,将网络适配器设置为新建的虚拟交换机 nat 打开win10->控制面板->网络和共享中 ...

  2. MCMC&Gibbs sampling

    Note of Markov Chain Monte Carlo and Gibbs Sampling :  http://pan.baidu.com/s/1jHpWY1o 序:A major lim ...

  3. Oracle操作语句--增加/删除

    1.删除1980年雇员的雇员信息: delete  from myemp where     hiredate between to_date('1980-1-1','yyyy-mm-dd') and ...

  4. Codeforces 1060C Maximum Subrectangle(子矩阵+预处理)

    题意:给出数组a,b,组成矩阵c,其中$c_{ij}=a_i*b_j$,找出最的大子矩阵,使得矩阵元素和<=x,求这个矩阵的size n,m<=2000 思路:对于子矩阵(l1...r1) ...

  5. 《剑指Offer》第二章（一）题 9 -12

    第二章 面试题9:用两个栈实现队列 题目:如面试题,给你两个栈, 实现队列的先进先出,即在队列头删除一个元素以及在队列的尾部添加一个元素 思路:这个题的分析感觉很巧妙,从一个具体的例子入手,找出其中的 ...

  6. 机器学习（ML）十三之批量归一化、RESNET、Densenet

    批量归一化 批量归一化(batch normalization)层,它能让较深的神经网络的训练变得更加容易.对图像处理的输入数据做了标准化处理:处理后的任意一个特征在数据集中所有样本上的均值为0.标准 ...

  7. 磁盘文件系统管理与LVM逻辑卷

    一.磁盘以及分区管理 无论是Linux系统还是Windows系统.当现有硬盘的规划不能满足当前需求时.我们就需要将其重新规划和调整 实现上述操作我们就需要用到fdisk磁盘及分区管理工具.此工具是大多 ...

  8. python学习Day27--time模块、sys模块、os模块和序列化模块

    [知识点] 1.时间模块: (1)时间戳时间,格林威治时间,float数据类型 英国伦敦的时间:1970.1.1     0:0:0 北京时间:1970.1.1     8:0:0 (2)结构化时间, ...

  9. Pyinstaller 打包程序为可执行文件exe

    Pyiinstaller打包 pyinstaller是python的一个第三方模块,使用它可以将pythnon程序打包为可执行文件,实现打包后的程序在没有python环境的机器上也可以运行.pyins ...

  10. 网站windows可以访问mac和linux无法访问【MTU MSS问题】

    环境: 阿里云LB 内网地址类型,代理后面的k8s上的服务 公司和阿里云之间vpn打通 在windows上进行访问一切正常,在相同的办公局域网linux主机内访问不通,mac笔记本访问同样不通,tel ...