CSS文本超出2行就隐藏并且显示省略号,单行居中,两行居左

css的基础属性 :

overflow:hidden;            //超出的文本隐藏 

text-overflow:ellipsis;     //溢出用省略号显示

white-space:nowrap;         //溢出不换行,只能显示一行

css3属性 :

display:-webkit-box;            //将对象作为弹性伸缩盒子模型显示。

-webkit-box-orient:vertical;    //从上到下垂直排列子元素(设置伸缩盒子的子元素排列方式)

-webkit-line-clamp:2;           //这个属性不是css的规范属性,需要组合上面两个属性,表示显示的行数。



CSS文本超出2行就隐藏并且显示省略号,代码如下 :

overflow:hidden; 

text-overflow:ellipsis;

display:-webkit-box; 

-webkit-box-orient:vertical;

-webkit-line-clamp:2; 

实现单行居中,两行居左,超过两行省略


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    <style>
        p{
            display:inline-block;   
            text-align:left;
        }
        span{
            display:-webkit-box;
            -webkit-line-clamp:2;
            -webkit-box-orient:vertical;
            overflow:hidden;
            text-overflow:ellipsis;
        }
        div{
            border: 1px solid red;
            font-size: 30px;
            text-align:center;
            width: 800px;
            height: 500px;
        }
    style>
head>
<body>
    <div>
        <p><span>单行居中,多行居左span>p>
    div>
body>
html>

属性说明 :

标题 CSS overflow 属性

默认值: visible
继承: no
版本: CSS2

CSS文本超出2行就隐藏并且显示省略号,单行居中,两行居左_第1张图片

CSS文本超出2行就隐藏并且显示省略号,单行居中,两行居左_第2张图片


CSS3 text-overflow 属性

CSS文本超出2行就隐藏并且显示省略号,单行居中,两行居左_第3张图片


CSS white-space 属性

CSS文本超出2行就隐藏并且显示省略号,单行居中,两行居左_第4张图片


CSS display 属性

CSS文本超出2行就隐藏并且显示省略号,单行居中,两行居左_第5张图片

CSS文本超出2行就隐藏并且显示省略号,单行居中,两行居左_第6张图片


CSS3 box-orient 属性

CSS文本超出2行就隐藏并且显示省略号,单行居中,两行居左_第7张图片
CSS文本超出2行就隐藏并且显示省略号,单行居中,两行居左_第8张图片


-webkit-line-clamp 属性

CSS文本超出2行就隐藏并且显示省略号,单行居中,两行居左_第9张图片

你可能感兴趣的:(html5,css,css3,css,css3)