css 文本 超过两行或者三行隐藏并在后面加上省略号…..

css 文本 超过两行或者三行隐藏并在后面加上省略号…..

text-aline: left / right / end / justify / inhertid;

首先 解决单行文字要设置两端对齐:

text-aline: justify ;

该设置是无效的! 发现文本还是左对齐

<p sytle="width: 100px; height: 30px; border: 1px solid red;">hello world</p>

解决方法:

1 . 在标签内部添加标签

​

hello world

​ 对其中的 i 标签设置 属性

		{
			display: inline-block;
			conent: "";
			width: 100%;
		}

2. 添加伪类 在html 结构中尽量少添加多余的标签,可以使用伪类达到相同的目的

   p{
   
   	&::after{
   
   	display: inline-block;
   
   	conent: "";
   
   	width: 100%;
   
   	}
   
   } 
   
   

   sass 语法

在实际开发中会遇到文字超过多少行,只是显示固定行数,并且加上省略号,活着加上其他的处理.

超出加上省略号:

overflow: hidden;

text-overflow:ellipsis;

white-space: nowrap;
	

再加上行数:

-webkit-line-clamp: 3;

以上代码可以实现需求,但是在实际开发过程中,特别是在移动端适配过程中会出现很多问题

  .text {
        text-align: justify;
        line-height: 18px;
        &.hiddle {
          @include hiddle(2);
          // 此处是sass语法 等效于 两行 + 省略号 不懂的正常写就行
        }
      }

在移动端出现 结尾三个点点在某些浏览器中与文字重叠;

解决方法:

​ 出现重叠情况下是在,隐藏了多余行,我们可以在隐藏的时候,设置text-aline: left;

​ 点击事件后: 设置text-aline: justify;

​ 就可以完美解决这个问题

​ 在文章开头说的 text-aline: justify 单行问题,在这里不存在,多行出了最后一行都是两端对齐.

原文链接：https://www.cnblogs.com/lakemonster/p/10232533.html
本文来源 爱码网，由 Z5站长网 整理编辑，其版权均为 原网址 所有，文章内容系作者个人观点，不代表 Z5站长网 对观点赞同或支持。如需转载，请注明文章来源。