微信小程序css篇---文本溢出

本文介绍了在Android开发中如何使用CSS样式的text-overflow、white-space和-webkit-line-clamp等属性来实现文本的单行或多行显示及省略效果。
部署运行你感兴趣的模型镜像

最为一名Android开发人员,现在无法拖控件写布局真的是一件很麻烦的事啊,所以css样式成为了我做项目的最大隐患,遇到的问题可能做前端的人员看到会觉得很低端,但没办法我还是记录下来吧,多遇到几次就会了,废话不多说,今天遇到的是text一行显示,多的省略----文本溢出的问题。

如果是一行显示的时候,写在view里的样式,会在最后显示省略号,但要是写在text组件中设置这个样式的话就是最后多出来的字隐藏了。

.textview{
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap
}

当然 有单行的省略 就有多行,不过多行的设置的有点复杂:

.textview{
  display: -webkit-box ;
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: break-all;
  -webkit-box-orient: vertical;
  -webkit-line-clamp:
2;

}

-webkit-line-clamp:2;//这是设置显示的多少行。

-webkit-box-orientvertical

word-break规定自动换行的处理方法。

您可能感兴趣的与本文相关的镜像

ACE-Step

ACE-Step

音乐合成
ACE-Step

ACE-Step是由中国团队阶跃星辰(StepFun)与ACE Studio联手打造的开源音乐生成模型。 它拥有3.5B参数量,支持快速高质量生成、强可控性和易于拓展的特点。 最厉害的是,它可以生成多种语言的歌曲,包括但不限于中文、英文、日文等19种语言

### 微信小程序 CSS 文本溢出自动滚动实现 在微信小程序开发中,当遇到文本长度超出容器宽度的情况时,可以通过特定的样式设置来处理。以下是两种常见的解决方案: #### 方法一:通过 `scroll-view` 组件实现水平滚动效果 可以利用 `<scroll-view>` 的特性,在文本过长的情况下提供可滚动的功能。 ```html <scroll-view class="scroll-text" scroll-x="{{true}}" style="white-space: nowrap;"> {{longText}} </scroll-view> ``` 对应的样式如下: ```css .scroll-text { width: 100%; overflow: hidden; white-space: nowrap; /* 禁止换行 */ } ``` 此方法适用于需要手动拖动查看隐藏部分的内容场景[^2]。 --- #### 方法二:模拟自动滚动动画 如果希望文本能够自动滚动,则可通过动态调整 `transform` 属性配合定时器或关键帧动画完成这一功能。 ##### HTML 结构 ```html <view class="auto-scroll">{{longText}}</view> ``` ##### 样式定义 ```css .auto-scroll { width: 100%; overflow: hidden; white-space: nowrap; /* 不允许换行 */ } /* 定义关键帧动画 */ @keyframes scrollText { from { transform: translateX(0); } to { transform: translateX(-100%); } } .auto-scroll.active { animation: scrollText 5s linear infinite; /* 动画持续时间设为5秒并无限循环 */ } ``` 为了使动画生效,可以在页面加载完成后给 `.auto-scroll` 添加类名 `active` 或者绑定事件触发该状态变化。 --- #### 注意事项 - 如果仅需简单截断多行文本而不涉及滚动操作,推荐使用 `-webkit-line-clamp` 和其他相关属性组合的方式[^1]。 - 对于性能敏感的应用程序,请谨慎评估连续运行动画可能带来的资源消耗问题。 --- ### 总结 对于微信小程序中的文本溢出情况,既可以选择静态展示形式(如省略号),也可以采用交互性强的设计方案——比如借助 `scroll-view` 提供的手动滑动支持或者基于 CSS 动画构建自动化滚屏体验。
评论 4
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值