1. 前言
端午假期比较闲、就对本周遇到的一些小问题做个简单梳理记录。
2. 单行文字超出...
当文字内容超过一定长度时,将超出的那部分内容隐藏、用...代替.
具体代码如下:
width: 300rpx; // 框定内容区域大小、也可通过其它方式去框定
overflow: hidden; // 超出内容隐藏
text-overflow: ellipsis; // 用省略号来代表被隐藏掉的文本
white-space: nowrap; // 强制文本在一行显示
3. 多行文字超出...
有时候单行展示的内容太少、但又因空间有限不可能展示全部、故UI期望展示N行、若还有再超出再用...替代.
具体代码如下:
width: 300rpx; // 框定内容区域大小
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box; // 将对象作为弹性伸缩盒子模型展示
-webkit-line-clamp: 2; // 设置显示的行数
-webkit-box-orient: vertical; // 设置伸缩盒子的子元素排列方式: 从上到下垂直排列子元素
4. 超过...后且后面紧跟小图标
有时候会遇到复杂的情况，需要在这段文字后紧跟一个图标，当文字溢出时，图标照常显示在后面。
示例如下，图中的红色小方框是一直要显示的。
先看下未超出时的预期效果:
再看看超出时的预期效果:
实现思路分析: 对标签布局进行处理, text-overflow起作用额环境时'block'状态下的父元素容器.
具体实现代码如下:
// wxml
<view class="wrapper">
<view class="test">测试超长部分隐藏111;测试超长部分隐藏;测试超长部分隐藏;测试超长部分隐藏;测试超长部分隐藏;测试超长部分隐藏;测试超长部分隐藏<text class="icon"></text></view>
</view>
// wxss
.wrapper {
display: inline-block;
max-width: 300rpx; /* max-width框定子元素的范围 */
}
.test {
font-size: 32rpx;
line-height: 32rpx;
color: #2C2C2C;
position: relative;
display: block;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
padding-right: 14px;
}
.icon {
position: absolute;
right: 0;
top: 11rpx;
width:10px;
height:10px;
background: red;
}
5. 写在最后
作为个前端儿, CSS是基本功, 要扎实。
若有错误之处, 恳请留言, 定会及时更正!
若觉着对您有帮助的话恳请点个赞或着收藏吧!
