Shopify Free Trial Apply
Shopify 60天试用
Shopify 14天试用
html+css

html+css

分享一个单行文本溢出和多行文本溢出显示省略号的方法

WordPressMili 发表了文章 • 1 个评论 • 1378 次浏览 • 2018-06-16 13:56 • 来自相关话题

之前,文本溢出显示省略号我都是调用的时候用限制字数的方式。这种方法有一个弊端就是自适应的时候或者单词排版不正常可能会出现文本过长和排列不整齐的现象,这个十分影响美观度。下面,就是单行文本和多行文本溢出显示省略号的方法,第一种单行比较适合标题过长,四二中多行比较适合简介类的引用文字。
一、单行溢出

1,单行溢出,超出部分显示...或者截取。前提必须有宽度。
CSS:{width:xxpx;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;},截取为clip;(这个比较适合用在标题过长)
width:300px;   
overflow: hidden;   
text-overflow:ellipsis;   
whitewhite-space: nowrap;

但是这个属性只支持单行文本的溢出显示省略号,如果我们要实现多行文本溢出显示省略号呢。

接下来重点说一说多行文本溢出显示省略号,如下。

二、多行溢出

{display:-webkit-box;overflow:hidden;text-overflow:ellipsis;-webkit-line-clamp:2;-webkit-box-orient:vertical;}

实现方法:
display: -webkit-box;   
-webkit-box-orient: vertical;   
-webkit-line-clamp: 3;   
overflow: hidden;
  查看全部
之前,文本溢出显示省略号我都是调用的时候用限制字数的方式。这种方法有一个弊端就是自适应的时候或者单词排版不正常可能会出现文本过长和排列不整齐的现象,这个十分影响美观度。下面,就是单行文本和多行文本溢出显示省略号的方法,第一种单行比较适合标题过长,四二中多行比较适合简介类的引用文字。
一、单行溢出

1,单行溢出,超出部分显示...或者截取。前提必须有宽度。
CSS:{width:xxpx;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;},截取为clip;(这个比较适合用在标题过长)
width:300px;   
overflow: hidden;   
text-overflow:ellipsis;   
whitewhite-space: nowrap;

但是这个属性只支持单行文本的溢出显示省略号,如果我们要实现多行文本溢出显示省略号呢。

接下来重点说一说多行文本溢出显示省略号,如下。

二、多行溢出

{display:-webkit-box;overflow:hidden;text-overflow:ellipsis;-webkit-line-clamp:2;-webkit-box-orient:vertical;}

实现方法:
display: -webkit-box;   
-webkit-box-orient: vertical;   
-webkit-line-clamp: 3;   
overflow: hidden;
 

分享一个单行文本溢出和多行文本溢出显示省略号的方法

WordPressMili 发表了文章 • 1 个评论 • 1378 次浏览 • 2018-06-16 13:56 • 来自相关话题

之前,文本溢出显示省略号我都是调用的时候用限制字数的方式。这种方法有一个弊端就是自适应的时候或者单词排版不正常可能会出现文本过长和排列不整齐的现象,这个十分影响美观度。下面,就是单行文本和多行文本溢出显示省略号的方法,第一种单行比较适合标题过长,四二中多行比较适合简介类的引用文字。
一、单行溢出

1,单行溢出,超出部分显示...或者截取。前提必须有宽度。
CSS:{width:xxpx;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;},截取为clip;(这个比较适合用在标题过长)
width:300px;   
overflow: hidden;   
text-overflow:ellipsis;   
whitewhite-space: nowrap;

但是这个属性只支持单行文本的溢出显示省略号,如果我们要实现多行文本溢出显示省略号呢。

接下来重点说一说多行文本溢出显示省略号,如下。

二、多行溢出

{display:-webkit-box;overflow:hidden;text-overflow:ellipsis;-webkit-line-clamp:2;-webkit-box-orient:vertical;}

实现方法:
display: -webkit-box;   
-webkit-box-orient: vertical;   
-webkit-line-clamp: 3;   
overflow: hidden;
  查看全部
之前,文本溢出显示省略号我都是调用的时候用限制字数的方式。这种方法有一个弊端就是自适应的时候或者单词排版不正常可能会出现文本过长和排列不整齐的现象,这个十分影响美观度。下面,就是单行文本和多行文本溢出显示省略号的方法,第一种单行比较适合标题过长,四二中多行比较适合简介类的引用文字。
一、单行溢出

1,单行溢出,超出部分显示...或者截取。前提必须有宽度。
CSS:{width:xxpx;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;},截取为clip;(这个比较适合用在标题过长)
width:300px;   
overflow: hidden;   
text-overflow:ellipsis;   
whitewhite-space: nowrap;

但是这个属性只支持单行文本的溢出显示省略号,如果我们要实现多行文本溢出显示省略号呢。

接下来重点说一说多行文本溢出显示省略号,如下。

二、多行溢出

{display:-webkit-box;overflow:hidden;text-overflow:ellipsis;-webkit-line-clamp:2;-webkit-box-orient:vertical;}

实现方法:
display: -webkit-box;   
-webkit-box-orient: vertical;   
-webkit-line-clamp: 3;   
overflow: hidden;