|
废话不多说,直接上代码实例:
只显示一行
- <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>
复制代码
|
|