文本
一组有用的文本工具类，用于设置内容的样式。
文本样式
UIkit 提供了多种文本工具类来设置文本样式。
| 类 | 描述 |
|---|---|
.uk-text-small |
添加此类以减小字体大小。 |
.uk-text-large |
添加此类以增大字体大小。 |
.uk-text-bold |
添加此类以创建粗体文本。 |
.uk-text-muted |
添加此类以使文本静音。 |
.uk-text-primary |
添加此类以获取其他文本信息。 |
.uk-text-success |
添加此类以表示成功。 |
.uk-text-warning |
添加此类以表示警告。 |
.uk-text-danger |
添加此类以表示危险。 |
.uk-text-contrast |
添加此类以使文本颜色在纯色区域或图片上可读。通常是白色。 |
.uk-text-capitalize |
添加此类以将文本首字母大写。 |
.uk-text-lowercase |
添加此类以将文本转换为小写。 |
.uk-text-uppercase |
添加此类以将文本转换为大写。 |
文本对齐
添加以下有用的类之一来对齐文本。
| 类 | 描述 |
|---|---|
.uk-text-left |
将文本左对齐。 |
.uk-text-left-small |
仅在小型设备上将文本左对齐。 |
.uk-text-left-medium |
在中小型设备上将文本左对齐。 |
.uk-text-right |
将文本右对齐。 |
.uk-text-center |
水平居中文本。 |
.uk-text-center-small |
仅在小型设备上水平居中文本。 |
.uk-text-center-medium |
在中小型设备上水平居中文本。 |
.uk-text-justify |
两端对齐文本。 |
示例
Lorem ipsum dolor sit amet, consetetur sadipscing elitr.
.uk-text-leftLorem ipsum dolor sit amet, consetetur sadipscing elitr.
.uk-text-rightLorem ipsum dolor sit amet, consetetur sadipscing elitr.
.uk-text-centerLorem ipsum dolor sit amet, consetetur sadipscing elitr.
.uk-text-center-smallLorem ipsum dolor sit amet, consetetur sadipscing elitr.
.uk-text-center-mediumLorem ipsum dolor sit amet, consetetur sadipscing elitr.
.uk-text-justify垂直对齐
添加以下类之一以将文本垂直对齐到对象。
| 类 | 描述 |
|---|---|
.uk-text-top |
将文本顶部对齐。 |
.uk-text-middle |
将文本垂直居中。 |
.uk-text-bottom |
将文本底部对齐。 |
示例
Lorem ipsum. Lorem ipsum. Lorem ipsum.文本换行
添加以下有用的类之一来控制文本换行。
| 类 | 描述 |
|---|---|
.uk-text-truncate |
防止文本换行成多行，而是将其截断。 |
.uk-text-break |
如果字符串的长度超过其容器的宽度，则将其断开。 |
.uk-text-nowrap |
防止文本换行成多行。 |
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt. Lorem ipsum dolor sit amet, consetetur sadipscing elit
.uk-text-truncateLorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt. Lorem ipsum dolor sit amet, consetetur sadipscing elit
.uk-text-breakAenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac.
.uk-text-nowrap