html中内容超出显示省略号的方法

html中内容超出显示省略号的方法

本博客主要介绍 前端开发中文本过多,以省略号显示。

效果如图:

               

单行:

<!--单行-->
<p class="pl">这个属性定义溢出元素内容区的内容会如何处理。如果值为 hidden,当点击hidden时,滚动机制关闭,</p>

CSS

/*单行文本的溢出显示省略号*/.pl{width: 200px;overflow:hidden;text-overflow:ellipsis; background: goldenrod;white-space: nowrap;/*加宽度width属来兼容部分浏览*/}

多行:

<div id="p2">这个属性定义溢出元素内容区的内容会如何处理。如果值为 hidden,当点击hidden时,滚动机制关闭,内容会被修剪,但是浏览器不会显示供查看内容的滚动条,默认值是 visible。这是一个段落。这是一个段落。这是一个段落。这是一个段落。
</div>

CSS

/*多行文本溢出显示省略号*/
#p{width:220px;height:58px;overflow:hidden;text-overflow:ellipsis;background: greenyellow;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden;/*-webkit-line-clamp是用来限制在一个块级元素内显示的文本行数,为了实现这个效果,需要结合其他-webkit属性。常见属性如下:display:-webkit-box;必须结合的属性,将对象作为弹性盒子模型显示。-webkit-box-orient:vertical;必须结合的属性,设置或检索伸缩盒子模型对象的子元素的排列方式。    */           
}

 

转载于:https://www.cnblogs.com/z-l-d/p/10409354.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/412197.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

vue 多选自动触发_Vue,初次邂逅(二)

一、前言二、Vue常用指令2.1 什么是指令&#xff1f;指令 (Directives) 是带有 v- 前缀的特殊特性。指令特性的预期值是&#xff1a;单个 JavaScript 表达式。指令的职责是&#xff0c;当表达式的值改变时&#xff0c;将其产生的连带影响&#xff0c;响应式地作用于 DOM。 例如…

string.Empty 和 并不总是可以互换的

在 C# 中&#xff0c;大多数情况下 "" 和 string.Empty 可以互换使用。比如&#xff1a;strings "";strings2 string.Empty;if(s string.Empty) { // }但是我发现有一种情况下只能是用常数形式&#xff1a; "", 而不能使用 string.Empty 这个静…

面向对象--类

一、成员变量和局部变量的区别&#xff1a; 1. 在类中的位置不同 a. 成员变量&#xff1a;在类中方法外 b. 局部变量&#xff1a;在方法定义中或者方法声明上 2. 在内存中的位置不同 a. 成员变量&#xff1a;在堆内存&#xff08;成员变量属于对象&#xff0c;对象进堆内存&…

搜索引擎的十大秘密(收藏)

要记住&#xff0c;在大多数情况下&#xff0c;登录搜索引擎可不是宣传和推广你网站的唯一手段。要取得真正的成功&#xff0c;你还需要使用很多其他的技术和方法。然而&#xff0c;当你适当的登录到搜索引擎后&#xff0c;也同样可以为你的站点带来大量的流量&#xff0c;而你…

pythonweb服务器部署iis_IIS部署python Web(FLASK试例)

开发环境&#xff1a;python3.6 、win7、pycharm20171、安装及配置IIS控制面板中>-程序和功能>-打开或关闭WINDOWS功能配置Internet信息服务配置万维网服务2、安装URL重写组件下载安装Web平台安装程序 5.0 (WEB PLATFORM INSTALLER 5.0)安装URL Rewrite 2.03、安装wfastc…

WPF开源框架项目

好久博客未更新新博文了&#xff0c;今天介绍一个WPF开源框架MaterialDesignInXamlToolkit废话不多说先让我们来看看框架得几张截图 让我们一起来看看源代码得结构如下图 接下我们运行代码看看运行后得截图 通过查看源代码, 由于是基于原生得状态进行修改样式及动画达到, 所以引…

rust房屋建造蓝图_都说蓝图,而不是白图、红图,你知道为什么?

文学上喜欢把对未来的构想或计划&#xff0c;称为蓝图。蓝图(英文&#xff1a;blueprint)在工业上指“蓝图纸”(晒图纸的俗称)&#xff0c;因为图纸是蓝色的&#xff0c;所以被称为“蓝图”。也许是因其具有易于保存&#xff0c;不会模糊&#xff0c;不会掉色&#xff0c;不易玷…

洛谷P1085不高兴的津津

转载于:https://www.cnblogs.com/LITTLESUNwl/p/10417533.html

今天是个值得纪念的日子

今天对于我来讲真是个值得纪念的日子。博客这个词对于我来讲并不陌生&#xff0c;但真正和它亲密接触要算是今天了。以前在BlogChina、CSDN Blog等好几个大的博客站都注册了&#xff0c;但一直只是当收集好文章的工具箱&#xff0c;从来没有自己写过。今天是心血来潮&#xff0…

mysql中什么叫临时表_MySQL中使用临时表需要注意哪些?

1、临时表只在当前连接可见&#xff0c;当这个连接关闭的时候&#xff0c;会自动drop。这就意味着你可以在两个不同的连接里使用相同的临时表名&#xff0c;并且相互不会 冲突&#xff0c;或者使用 已经存在的表&#xff0c;但不是临时表的表名。(当这个临时表存在的时候&#…

Information worker

今天第一次听到了Information worker 这个词&#xff0c;很多人说.net 2.0中的很多新特性是为了Information worker 做的。体会一下&#xff0c;确实是这样。难道说Information worker作的东西不屑一顾&#xff1f;作为一个team,只有worker的效率提高了&#xff0c;整个team的…

2.【sheel学习】数组

sheel数组的部分操作 当我们需要使用一个指令&#xff0c;需要接收它返回的多个参数的时候这个时候就需要使用到数组 1&#xff1a;定义 declare -a array(1 2 3) 可以赋值多个参数&#xff0c;中间用空格隔开 2&#xff1a;数组值的获取 获取某个index的值&#xff1a;${array…

mysql添加新的实例_MySQL中添加新用户权限的实例详解

有2个不同的方法增加用户&#xff1a;通过使用GRANT语句或通过直接操作MySQL授权表。比较好的方法是使用GRANT语句&#xff0c;因为他们是更简明并且好像错误少些。下面的例子显示出如何使用MySQL客户安装新用户。这些例子假定权限根据以前的章节描述的缺省被安装。这意味着为了…

浏览器无法显示某些网页或者提示脚本错误的问题解决

1.访问某些网站提示脚本错误的问题 例:我在访问自己的MSN Space时浏览器总是提示脚本错误,而在别的机器访问却没有问题.显然时浏览器设置问题.如果安装有上网助手软件的话,最好卸载它.如果还不行,那就在Internet选项中,回复安全,隐私,高级的默认设置.删除所有cookie和文件. 2.有…

统计学习方法 学习笔记(五):支持向量机(下)

通过支持向量机&#xff08;上&#xff09;和支持向量机&#xff08;中&#xff09;的介绍&#xff0c;对支持向量机应该有点感性的认识啦&#xff01;在这个学习笔记中&#xff0c;来继续探寻带核函数的支持向量机&#xff08;解决如下图所示的问题&#xff09; 对解线性分类问…