码迷,mamicode.com
首页 > Web开发 > 详细

关于css超出部分用隐藏,显示省略号

时间:2020-06-08 13:07:44      阅读:77      评论:0      收藏:0      [点我收藏+]

标签:vue   content   psi   webkit   back   die   width   line   col   

废话不多说,直接上代码。

只显示一行

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

<style>
.line{
    width: 400px;
}
.line p{
    line-height: 40px;
    overflow:hidden;
    white-space:nowrap;
    text-overflow:ellipsis;
}
</style>

固定高度

方法一:

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

<style>
.block{
    width: 400px;
    height: 80px;
    position: relative;
    overflow: hidden;
}
.block p{
    line-height: 40px;
}
.block:after {
    content: "...";
    position: absolute;
    bottom: 12px;
    right: 0px;
    padding-left: 20px;
    background: -webkit-linear-gradient(right, transparent, #fff 50%);
    background: -o-linear-gradient(right, transparent, #fff 50%);
    background: -moz-linear-gradient(right, transparent, #fff 50%);
    background: linear-gradient(to right, transparent, #fff 50%);
}
</style>

方法二(推荐):

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

 

关于css超出部分用隐藏,显示省略号

标签:vue   content   psi   webkit   back   die   width   line   col   

原文地址:https://www.cnblogs.com/sloanlv/p/13064851.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!