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. windows配置Lua开发环境

    官网上下载的不靠谱,很多库不能用,你如 require "socket" 如果没有vc那些编译也麻烦,摸索了很久,直接下载安装文件安装即可: 安装这两个就行: 先安装C++2005 ...

  2. CentOS 7 上安装 Django 2.2.4,解决报错:No module named ‘_sqlite3′

    1.首先下载最新版的sqlite :https://www.sqlite.org/download.html 下载源码包: 配置和编译方法如下: ./configure --prefix=/usr/l ...

  3. C#中? 和 ??的区别

    背景 最近在调试C#项目的时候,发现一个比较关于??的特殊用法,当时把我给惊到了,所以特意用这篇短短的笔记来记录一下我的解惑过程: 示例代码: showsomething(isNameNull ?? ...

  4. [Python]获取win平台文件的详细信息

    import win32api def getFileProperties(fname): """ 读取给定文件的所有属性, 返回一个字典. ""&q ...

  5. HDU4192 Guess the Numbers(表达式计算、栈)

    题意: 给你一个带括号.加减.乘的表达式,和n个数$(n\leq 5)$,问你带入这几个数可不可能等于n 思路: 先处理表达式:先将中缀式转化为逆波兰表达式 转换过程需要用到栈,具体过程如下:1)如果 ...

  6. 低功耗蓝牙ATT/GATT/Profile/Service/Characteristic规格解读

    什么是蓝牙service和characteristic?到底怎么理解蓝牙profile?ATT和GATT两者如何区分?什么又是attribute?attribute和characteristic的区别 ...

  7. 某cms审计思路,以及ci框架如何找寻注入点

    某cms审计思路,以及ci框架如何找寻注入点 ABOUT 之前闲着没事的时候审的某cms,之前看一群大表哥刷过一次这个cms,想着看看还能不能赶得上分一杯羹,还是审计出来些东西,来说一说一个前台注入吧 ...

  8. 《Head first设计模式》学习笔记

    1. 单例模式 2. 工厂模式 3. 抽象工厂 4. 策略模式 5. 观察者模式 6. 装饰者模式 7. 命令模式 8. 适配器模式 9. 外观模式 10. 模版方法模式 11. 迭代器模式 设计模式 ...

  9. Centos 下设置静态ip地址

       今天小编遇到了需要设置centos(6.4) 下静态ip地址,下面把详细步骤记录下来. 1> 首先打开这个 vi /etc/sysconfig/network-scripts/ifcfg- ...

  10. Mysql 命令 操作

    1.user表        如果需要从其他机器连接 mysql 服务器报这个错“ERROR 1130: Host 'root' is not allowed to connect to this M ...