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. AcWing 789.数的范围

    AcWing 789.数的范围 题目描述 给定一个按照升序排列的长度为n的整数数组,以及 q 个查询. 对于每个查询,返回一个元素k的起始位置和终止位置(位置从0开始计数). 如果数组中不存在该元素, ...

  2. Linux学习笔记-Centos7搭建owncloud私有云盘

    使用环境:虚拟机centos7 1.下载安装LAMP相关软件 [root@localhost yum.repos.d]# yum install httpd –y [root@localhost yu ...

  3. 4、Oracle 数据库 startup 报错：ORA-27102: out of memory

    1.数据库启动报错: ORA-: out of memory SQL> startup pfile='/db/oracle/init.ora'; ORA-: out of memory Linu ...

  4. tmobst4an

    (单选题)HTML代码: <table> <tr><td>Value 1</td><td></td></tr> &l ...

  5. GetModuleFileNameEx遍历获取64bit程序路径失败的一种解决方法(Win7-64-bit)

    问题: 32位程序在64位系统上调用GetModuleFileNameEx()遍历获取64位进程的全路径失败,得到的路径都为空. 根据官方的说法: For the best results use t ...

  6. Windows 7中的“帮助和支持”无法打开怎么办？

    win7 X64 将下面的代码导入注册表 Windows Registry Editor Version 5.00 [HKEY_CLASSES_ROOT\.xml] @="xmlfile&q ...

  7. 如何写出优雅的Python代码？

    有时候你会看到很Cool的Python代码,你惊讶于它的简洁,它的优雅,你不由自主地赞叹:竟然还能这样写.其实,这些优雅的代码都要归功于Python的特性,只要你能掌握这些Pythonic的技巧,你一 ...

  8. Codeforces_731_B

    http://codeforces.com/problemset/problem/731/B 模拟模拟. #include<iostream> #include<cstring> ...

  9. HDU_2510_打表

    http://acm.hdu.edu.cn/showproblem.php?pid=2510 dfs打表. #include<iostream> #include<cstdio> ...

  10. 将STM32F407片外SRAM作运行内存

    本例演示用的软硬件: 片内外设驱动库:STM32CubeF41.24.1的HAL库1.7.6,2019年4月12日 IDE:MDK-ARM 5.28.0.0,2019年5月 开发板:片外SRAM挂在F ...