HTML(多行)文本超过部分隐藏,末尾显示(...)
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(多行)文本超过部分隐藏,末尾显示(...)的更多相关文章
- HTML中文本过长时自动隐藏末尾部分或中间等任意部分
一. 一般情况下,HTML字符串过长时都会将超过的部分隐藏点,方法如下: 设置CSS: .ellipsis-type{ max-width: 50px; ...
- 【CSS】隐藏多行文本框Textarea在IE中的垂直滚动栏
在<[CSS]禁止Google浏览器同意定义调整多行文本框>(点击打开链接)中已经提及过怎样使多行文本框Textarea在一些DOM2的浏览器中固定下来. 这不,多行文本框Textarea ...
- 使用 js 实现文本过多时隐藏部分文本
使用 js 实现文本过多时隐藏部分文本 情景描述: 有时候我们需要显示部分文字,就像 QQ 空间这样,先显示部分文字,加一个[查看全文],让用户选择是否查看全部 解决方法: 第一步:在一个 id 为 ...
- Delphi TMemo 可以显示、编辑多行文本
多行编辑框组件(TMemo)TMemo组件可以显示.编辑多行文本,是一个标准的Windows多行编辑组件.对一些比较多的文本内容可以利用TMemo组件来显示.编辑. 1.TMemo组件的典型用法 TM ...
- css如何实现多行文本时,内容溢出,出现省略号
一:单行文本出现省略号: .oneLine{ white-space: nowrap; text-overflow: ellipsis; overflow: hidden; width: 100px; ...
- DataGridView 行、列的隐藏和删除
) 行.列的隐藏 [VB.NET] ' DataGridView1的第一列隐藏 DataGridView1.Columns(0).Visible = False ' DataGridView1的第一行 ...
- sharepoint更新多行文本webparth
前台 <script> function Copy() { var value = document.getElementById("<%=BodyBox.ClientID ...
- 禁止多行文本框textarea拖拽
禁止多行文本框textarea拖拽: textarea { resize: none; } resize这个是用于元素缩放,它可以取以下几个值: none 默认值 both 允许水平方向及垂直方向缩放 ...
- JS控制文本框中的密码显示/隐藏功能
<html> <head> <title>[荐]JS控制文本框中的密码显示/隐藏功能_网页代码站(www.6a8a.com)</title> <s ...
随机推荐
- Jutil 单元测试
eclipse 自身集成了jtuil,右击项目,点击bulidpath,addjar,如下所示添加jutil 新建一个Junit的测试类用来测试上面的测试方法,新增Junit的测试类方法如下: // ...
- qt creator源码全方面分析(2-1-1)
目录 C++的策略/二进制兼容性问题 定义 ABI注意事项 可做与不可做 库程序员的技巧 位标志 使用d指针 故障排除 在没有d指针的情况下将新数据成员添加到类中 添加已重新实现的虚函数 使用新类 向 ...
- linux下面误删root里面的文件夹 恢复方法
手残吧 /root/ 里面的文件删除了. .mkdir /root cp -a /etc/skel/.[!.]* /root 主要是吧 /etc/skel/里面的文件拷贝回去就行了~~~哈.. 转自: ...
- javase第一章(了解java)
------------恢复内容开始------------ java介绍 java这门语言,如果你是一名IT从业者,那么就一定是会有所耳闻的,毕竟,这是编程史上其商业化最成功的一门语言,当然, 编程 ...
- 如何利用开源解码项目开发js视频解码的web应用 系列
介绍web上开发视频业务相关程序的技术演变历程 https://www.cnblogs.com/maoliangwu/articles/12046495.html 介绍ffmpeg asm.js we ...
- Github第三方登陆详细流程
一. 流程图 二.具体实现步骤 Ⅰ.创建OAuth App 我们首先需要创建一个OAuth App,根据下图的步骤点击即可 依次填写信息,然后点Register application 然后我们可以看 ...
- Eclipse导入项目提示No projects are found to import解决办法
使用Eclipse导入项目时遇到No projects are found to import提示的解决办法. 这是因为导入的文件里面缺少两个文件:.classpath.project 在这里三种方案 ...
- 文本相似性热度统计(python版)
0. 写在前面 节后第一篇,疫情还没结束,黎明前的黑暗,中国加油,武汉加油,看了很多报道,发现只有中国人才会帮助中国人,谁说中国人一盘散沙?也许是年龄大了,看到全国各地的医务人员源源不断的告别家人去支 ...
- 基于 Serverless Component 全栈解决方案
什么是 Serverless Component Serverless Component 是 Serverless Framework 的,支持多个云资源编排和组织的场景化解决方案. Serverl ...
- Window下,Jenkins忘记密码解决方法
没有修改过密码的情况下找回初始密码(或者第一次部署的时候) 进入目录 D:\jenkins\secrets ,找到文件 initialAdminPassword 在jenkins页面,输入登录名adm ...