-
white-space 属性
-
normal 默认。空白会被浏览器忽略。
pre 空白会被浏览器保留。其行为方式类似 HTML 中的 pre标签。
nowrap 文本不会换行,文本会在在同一行上继续,直到遇到 br标签为止。
pre-wrap 保留空白符序列,但是正常地进行换行。
pre-line 合并空白符序列,但是保留换行符。
inherit 规定应该从父元素继承 white-space 属性的值。
text-overflow 属性
-
clip 默认。空白会被浏览器忽略。
pre 剪切文本。
ellipsis显示省略符号 … 来代表被修剪的文本。
string 使用给定的字符串来代表被修剪的文本。
initial 设置为属性默认值。
inherit从父元素继承该属性值。
注意
实现多行文本溢出显示关键
1、-webkit-line-clamp 用来限制在一个块元素显示的文本的行数。 为了实现该效果,它需要组合其他的WebKit属性。常见结合属性:
2、display: -webkit-box; 必须结合的属性,将对象作为弹性伸缩盒子模型显示 。
3、-webkit-box-orient 必须结合的属性,设置或检索伸缩盒对象的子元素的排列方式
常用案例
// An highlighted block
<template>
<view class="test-box">
<!-- 一行显示不换行 -->
<view class="text" style="color: red;">
越来越觉得,一个人走很长的路,靠的是更加“底层”的素质:非常积极的情绪力量、感受到美和享受的能力、理性的思维能力、开放的心态,还有一些性格上更柔韧的地方。</view>
<!-- 一行显示超出省略 -->
<view class="text1" style="color: green;">
越来越觉得,一个人走很长的路,靠的是更加“底层”的素质:非常积极的情绪力量、感受到美和享受的能力、理性的思维能力、开放的心态,还有一些性格上更柔韧的地方。</view>
<!-- 多行超出省略 -->
<view class="text2" style="color: blue;">
越来越觉得,一个人走很长的路,靠的是更加“底层”的素质:非常积极的情绪力量、感受到美和享受的能力、理性的思维能力、开放的心态,还有一些性格上更柔韧的地方。</view>
</view>
</template>
<style>
.test-box{
width: 200px;
height: 200px;
border: solid 1px red;
}
//不换行一行显示
.text {
white-space: nowrap;/*规定段落中的文本不进行换行 */
}
//超出一行省略
.text1 {
overflow: hidden;/*超出部分隐藏*/
text-overflow: ellipsis;/* 超出部分显示省略号 */
white-space: nowrap;/*规定段落中的文本不进行换行 */
}
//多行超出省略
.text2 {
display: -webkit-box; //特别显示模式,将对象作为弹性伸缩盒子模型显示
-webkit-box-orient: vertical; //盒子中内容竖直排列
-webkit-line-clamp: 2;//这里是文字超出几行省略
overflow: hidden;/*超出部分隐藏*/
text-overflow: ellipsis; //文本溢出部分用省略号表示
}
</style>