文本样式小结

 <style>
        p {
            width: 400px;
            height: 40px;
            background-color: pink;
        
            text-indent: 2em;
         
            text-align: center;
            
            line-height: 40px;
        }

        p::first-letter {
            font-size: 20px;
            text-shadow: 2px 2px 2px red;
        }

       
        a {
            text-decoration: none;
            color: #000;
        }

        a:hover {
            text-decoration: underline;
           
            color: rgb(0, 0, 255);
        }

        span {
            text-decoration: line-through;
        }

        .one {
            letter-spacing: 4px;
         
        }
    </style>

</head>

<body>
    <p class="one">如成制得在得妄，郭畴的，法小重，望路量。</p>
    <a href="#">略种希马。</a>
    <span>如备韩流。</span>
    <div class="one">
        Lorem ipsum dolor sit amet.
    </div>
</body>

二、文本省略

2.1单行文本省略：元素设置宽度

1.设置空白空间 white-space:

可选值：nowrap(不转行)

normal(正常转行，默认值)

2.设置溢出内容显示 overflow包括 overflow-x(单独设置水平方向)和overflow-y(单独设置垂直方向)二个属性

可选值：hidden 溢出隐藏

auto 按需产生滚动条

scroll 生成滚动条

3.设置溢出文本样式 text-overflow

2.2 多行文本省略元素设置宽度

1.溢出内容隐藏 overflow：hidden

2.设置几行省略 -webkit-line-clamp

3.因为要实现 -webkit-line-clamp属性有效果，所以添加display: -webkit-box;和-webkit-box-orient: vertical

<style>
        p {
            width: 200px;
            background-color: rgb(255, 0, 0);
            white-space: nowrap;
       
            overflow: hidden;
          
            text-overflow: ellipsis;
        }

      
        div.two {
            width: 200px;
            height: 20px;
            background-color: black;
            color: white;
          
            overflow: auto;
         
        }

     
        .one {
            width: 180px;
            background-color: aqua;
            line-height: 20px;
            overflow: hidden;
        
            -webkit-line-clamp: 2;
          
            display: -webkit-box;
        
            -webkit-box-orient: vertical;
        }

     
    </style>
</head>

<body>
    <p>国是句登融哉好，备。不回疾妙我当向，升。</p>
    <div class="two">
        书使密不认变时君，流实到过足身未子，生。
    </div><br>
    <div class="one">
        家就尤绪洪商在不到快下者要大种韩，开法。
        龄此孔书归书张之笔。
    </div>
    <div class="three">
        
    </div>
</body>

chenguan66

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
文本样式小结

十六进制 #ffffff 光的三原色：红绿蓝，每二位数值代表一个颜色的浓度所以颜色浓度最大，代表白色(#fff)，浓度最低为黑色（#000）3.因为要实现 -webkit-line-clamp属性有效果，所以添加display: -webkit-box;2.设置溢出内容显示 overflow包括 overflow-x(单独设置水平方向)和overflow-y(单独设置垂直方向)二个属性。b：设置阴影模糊范围，注意值越大，模糊程度越高，没有负值。auto 按需产生滚动条。scroll 生成滚动条。
复制链接

扫一扫