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

标题: css如何把超出部分隐藏，显示省略号 [打印本页]
作者: 欧阳锋    时间: 2020-6-8 17:43
标题: css如何把超出部分隐藏，显示省略号

废话不多说，直接上代码实例：

只显示一行

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

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


固定高度

方法一：

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

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






欢迎光临 源码论坛,商业源码下载,尽在锦尚中国商业源码论坛 (https://bbs.52jscn.com/) Powered by Discuz! X3.3