文字处理

返回：一般常见样式处理及开发技巧

强制换行

返回顶部

pre {
    white-space: pre-wrap;
    word-wrap: break-word;  
}

用CSS动画实现省略号动画

返回顶部

.point:after {
    overflow: hidden;
    display: inline-block;
    vertical-align: bottom;
    animation: ellipsis 2s infinite;
    content: "\2026";
}
@keyframes ellipsis {
    from {
        width: 2px;
    }
    to {
        width: 15px;
    }
}

长文本自动换行

返回顶部

pre {
    white-space: pre-line;
    word-wrap: break-word;
}

单行文本溢出截断

返回顶部

div {
 white-space: nowrap;
 overflow: hidden;
 text-overflow: ellipsis;
 background: #ff7733;
 color: white;
}

单行最多展示九个字

返回顶部

多行文本溢出截断

返回顶部

• 使用-webkit-line-clamp

p {
 width: 400px;
 text-overflow: ellipsis;
 display: -webkit-box;
 overflow: hidden;
 -webkit-line-clamp: 4;
 -webkit-box-orient: vertical;
 text-align: justify;
}

要注意概属性需要与以下属性配合：

它需要和 display、-webkit-box-orient 和 overflow 结合使用：

• display: -webkit-box; 必须结合的属性，将对象作为弹性伸缩盒子模型显示。
• -webkit-box-orient; 必须结合的属性，设置或检索伸缩盒对象的子元素的排列方式
• text-overflow: ellipsis; 可选属性，可以用来多行文本的情况下，用省略号“…”隐藏超出范围的文本。

自定义文本选择的样式

返回顶部

<p class="custom-text-selection">Select some of this text.</p>

::selection {
  background: aquamarine;
  color: black;
}
.custom-text-selection::selection {
  background: deeppink;
  color: white;
}

文字保持原有样式显示

返回顶部

<pre style={{ whiteSpace: 'pre-wrap', wordWrap: 'break-word', color: '#ff0a0a' }}>
  {item.content}
</pre>

输入框标签文字浮动

返回顶部

codepen

渐变文字

返回顶部

.gradient-text {
  background: -webkit-linear-gradient(pink, red);
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
}

蚀刻文字效果

返回顶部

.etched-text {
  text-shadow: 0 2px white;
  font-size: 1.5rem;
  font-weight: bold;
  color: #b8bec5;
}