源码论坛公告:本站是一个交流学习建站资源的社区论坛,旨在交流学习源码脚本等资源技术,欢迎大家投稿发言! 【点击此处将锦尚放在桌面

源码论坛,商业源码下载,尽在锦尚中国商业源码论坛

 找回密码
 会员注册

QQ登录

只需一步,快速开始

查看: 8492|回复: 0
打印 上一主题 下一主题

[CSS/Html] css如何把超出部分隐藏,显示省略号

[复制链接]

1175

主题

1564

帖子

9020

金币

超级版主

Rank: 8Rank: 8

积分
19728
跳转到指定楼层
1#
发表于 2020-6-8 17:43:30 | 只看该作者 回帖奖励 |倒序浏览 |阅读模式

废话不多说,直接上代码实例:

只显示一行

  1. <div class="line">
  2.     <p>
  3.         一般自己写项目时, 一个接口URL 就可以了。但在实际项目开发中,一个项目可能会请求不同的服务器的url,这时,我们简单的配置下访问接口域名,然后不同域名的接口,直接换对象调用即可,这样不管有多少个不同的接口,我们都可以很好的管理使用。
  4.     </p>
  5. </div>

  6. <style>
  7. .line{
  8.     width: 400px;
  9. }
  10. .line p{
  11.     line-height: 40px;
  12.     overflow:hidden;
  13.     white-space:nowrap;
  14.     text-overflow:ellipsis;
  15. }
  16. </style>
复制代码


固定高度

方法一:

  1. <div class="block">
  2.     <p>
  3.         在Vue 项目开发中,我们与接口打交道最多了,如何来优雅的使用Axios变得尤为重要了。 通常我们通过客户端向后端发送请求来接收接口数据,然后将这些接口数据完美的呈现到网页上。
  4.     </p>
  5. </div>

  6. <style>
  7. .block{
  8.     width: 400px;
  9.     height: 80px;
  10.     position: relative;
  11.     overflow: hidden;
  12. }
  13. .block p{
  14.     line-height: 40px;
  15. }
  16. .block:after {
  17.     content: "...";
  18.     position: absolute;
  19.     bottom: 12px;
  20.     right: 0px;
  21.     padding-left: 20px;
  22.     background: -webkit-linear-gradient(right, transparent, #fff 50%);
  23.     background: -o-linear-gradient(right, transparent, #fff 50%);
  24.     background: -moz-linear-gradient(right, transparent, #fff 50%);
  25.     background: linear-gradient(to right, transparent, #fff 50%);
  26. }
  27. </style>
复制代码


方法二(推荐):

  1. <div class="block">
  2.     <p>
  3.         在Vue 项目开发中,我们与接口打交道最多了,如何来优雅的使用Axios变得尤为重要了。 通常我们通过客户端向后端发送请求来接收接口数据,然后将这些接口数据完美的呈现到网页上。
  4.     </p>
  5. </div>
  6. <style>
  7. .block{
  8.     width: 100%;
  9.     font-size: 14px;
  10.     line-height: 18px;
  11.     display: -webkit-box;
  12.     overflow: hidden;
  13.     text-overflow: ellipsis;
  14.     -webkit-line-clamp: 2;
  15.     -webkit-box-orient: vertical;
  16. }
  17. </style>
复制代码


分享到:  QQ好友和群QQ好友和群 QQ空间QQ空间 腾讯微博腾讯微博 腾讯朋友腾讯朋友
收藏收藏 分享分享
您需要登录后才可以回帖 登录 | 会员注册

本版积分规则

锦尚中国源码论坛

聚合标签|锦尚中国,为中国网站设计添动力 ( 鲁ICP备09033200号 ) |网站地图

GMT+8, 2024-11-14 14:49 , Processed in 0.147041 second(s), 28 queries .

带宽由 锦尚数据 提供 专业的数据中心

© 锦尚中国源码论坛 52jscn Inc. 非法入侵必将受到法律制裁 法律顾问:IT法律网 & 褚福省律师 锦尚爱心 版权申诉 版权与免责声明