文本

使用如下示例代码可以对文本进行平滑、省略符等设置.

1
2
3
4
5
6
7
8
<style lang="scss">
@import '@bpui/style';

div {
// 使得 div下文字平滑.
@include bp-smoothing();
}
</style>

example

See the Pen bpui-style-text by brainpoint (@brainpoint) on CodePen.

bp-smoothing

设置文字平滑.

除使用mixin外, 还可以使用内置的类 .bp-smoothing.

1
@include bp-smoothing();

bp-ellipsis

设置文字单行缩略.

display属性的设置对缩略有影响; 单行缩略文本需要为 display: block, display: inline-block 或其他flow-root等允许的值

除使用mixin外, 还可以使用内置的类 .bp-ellipsis

1
@include bp-ellipsis();

bp-ellipsisMultiline

设置文字多行缩略文本.

display属性的设置对缩略有影响; 多行缩略文本已经设置为 display: -webkit-box

除使用mixin外, 还可以使用内置的类 .bp-ellipsisMultiline1, .bp-ellipsisMultiline2, … , .bp-ellipsisMultiline8 分别表示最大1~8行的文本缩略.

1
@include bp-ellipsisMultiline(最大行数)