css实现文本单行省略和多行省略



单行省略:


white-space:nowrap;

overflow:hidden;

text-overflow:ellipsis;



多行省略:


display:-webkit-box;

-webkit-box-orient:vertical;//表示盒子对象的子元素的排列方式

-webkit-line-clamp:3;//限制文本的行数,表示文本第多少行省略

overflow:hiddlen;

text-overflow:ellipsis;


--------------------------------------------------分割线----



当-webkit-box-orient不起作用时(默认编译的时候,会过滤 )关闭 autoprefixer 然后再开启:用注释就可以做到


代码:


div{

  display: -webkit-box;

  -webkit-box-orient: vertical;

  -webkit-line-clamp: 2;

  overflow: hidden;

 /* autoprefixer: off */

  -webkit-box-orient: vertical;

  /* autoprefixer: on */

}


又或者


div{

overflow : hidden;

text-overflow: ellipsis;

display: -webkit-box;

-webkit-line-clamp: 2;

-webkit-box-orient: vertical;

};


各个属性的使用:


overflow:hidden;设置了这个属性,text-overflow属性才会生效。


text-overflow: ellipsis; 用来在多行文本的情况下,用省略号"..."隐藏超出范围的文本内容。


display: -webkit-box;必须结合的属性,将对象作为弹性伸缩盒子模型显示。


-webkit-line-clamp: 2;用来限制在一个块元素显示的文本的行数。为了实现该效果,它需要组合其他的WebKit属性。


-webkit-box-orient: vertical; 必须结合的属性,设置或检索伸缩盒对象的子元素的排列方式。



超出div宽度范围的文字进行省略号省略,在鼠标移上去以后显示完整的内容


//超出范围,对文本进行省略号隐藏

div{

    width: 100px;

    overflow: hidden;        /*对超出容器的部分强制截取,高度不确定则换行*/

    text-overflow: ellipsis;    /*显示省略符号来代表被修剪的文本。*/

    white-space: nowrap;      /*禁止换行*/

 }



想显示省略掉的


/*方法一:鼠标移上去时直接释放宽度限制

 *但释放宽度岂不是会影响其他元素布局

 */


div:hover{

     width: auto;

}


/*方法二:鼠标移上去时释放overflowd的截取,按照原本样式显示,即换行

 *但换行会改变布局,但稍微比上面不换行直接显示好一点

 */


div:hover{

    text-overflow:inherit; 

    overflow: visible; 

    white-space: pre-line;     /*合并空白符序列,但是保留换行符。*/

}

/*方法三:鼠标移上去时会显示title标签中的文字内容,但是点丑,显示速度有点慢,位置也不大好*/

<div title="超出文字省略显示">超出文字省略显示</div>


antd table中的显示(column):


{

          title: '名称',

          dataIndex: 'Name',

          width: 100,

          render: (text) => {

             if (text) {

                    return <span title={text}>{text.length > 5 ? text.substring(0, 5) + '...' : text}</span>;

               }

           }

}

.li1 {

list-style:none;

width:100px;

white-space:nowrap;

text-overflow:ellipsis; 

-o-text-overflow:ellipsis; 

overflow: hidden;

margin-top:5px; 

}

 

.li2{

list-style:none;

margin-top:5px;

}


<ul>

<li class="li1" onmouseover="this.className='li2'" onmouseout="this.Name='li1'"><a href="#">111122222222222222222222221222</a></li>

<li class="li1" onmouseover="this.className='li2'" onmouseout="this.Name='li1'"><a href="#">45658798980000000000000899999999</a></li>

<li class="li1" onmouseover="this.className='li2'" onmouseout="this.Name='li1'"><a href="#">dfgf66666666666666666666666666666</a></li>

<li class="li1" onmouseover="this.className='li2'" onmouseout="this.Name='li1'"><a href="#">sdf88888888888888888888888888888888</a></li>

<li class="li1" onmouseover="this.className='li2'" onmouseout="this.Name='li1'"><a href="#">hkjjk6888888888666666666666666666666</a></li>

</ul>


留言

Leave a comments