超全超详细的工作中常用的css效果（文本样式）

2020-04-02 373 阅读1分钟

以一个div盒子为主题

代码如下

<style>
    .box{
        width: 200px;
        border: 1px border gold;
        margin: 10px auto;
        background-color: rgb(255, 179, 0);
    }
    
   
    
</style>
<body>
    <div class="box">
        无善无恶心之体，有善有恶意之动，知善知恶是良知，为善去恶是格物。 -- 王阳明
    </div>
</body>

效果

WX20221101-153916@2x.png

首行缩进效果

代码

.retract{
        text-indent: 2em;
    }

效果

WX20221101-155014@2x.png

单行溢出隐藏效果

代码

 .text-omit-single{
        text-overflow: ellipsis; /* 文本溢出时显示省略号来代表被修剪的文本 */
        overflow: hidden; /* 溢出部分隐藏 */
        white-space: nowrap; /* 段落中的文本不进行换行 */
    }

效果

WX20221101-154814@2x.png

多行溢出隐藏效果

代码

.text-omit-more{
        overflow: hidden;
        text-overflow: ellipsis; /* 文本溢出时显示省略号来代表被修剪的文本 */
        display: -webkit-box; /* 将对象作为弹性伸缩盒子模型显示 */
        -webkit-box-orient: vertical; /* 设置或检索伸缩盒对象的子元素的排列方式 */
        -webkit-line-clamp: 2; /* 文本需要显示多少行后省略 */
    }

效果

WX20221101-154749@2x.png

禁止选中文本

.text-not-select{
        -webkit-user-select:none;
        -moz-user-select:none;
        -ms-user-select:none;
        user-select:none;
    }

文本字符不折行

	word-break:break-all
	word-wrap:break-word