请教一个基础的 CSS 问题,小程序里如何实现两个纯文本行内元素并排,另一个行内元素内容超出时自动换行的效果?

作者站长头像
站长
· 阅读数 16

微信小程序里如何做到两个行内元素并排,另一个行内元素内容超出时自动换行。没有用 flex,因为第二个元素换行时需要贴在最左边。

同样的代码在 h5 里是 ok 的,如下:例如:请教一个基础的 CSS 问题,小程序里如何实现两个纯文本行内元素并排,另一个行内元素内容超出时自动换行的效果?

在小程序里就有问题,如下:请教一个基础的 CSS 问题,小程序里如何实现两个纯文本行内元素并排,另一个行内元素内容超出时自动换行的效果?

大致代码如下请教一个基础的 CSS 问题,小程序里如何实现两个纯文本行内元素并排,另一个行内元素内容超出时自动换行的效果?

// html
<view>
    <view class="highlight t-text"> ** </view>
    <view class="t-text"> 东西不错非常满意下次还来好耶好耶 </view>
</view>

// css
.comment-item {
    color: #fff;
    min-height: 24px;
    line-height: 20px;
    padding: 2px 8px;
    margin-bottom: 4px;
    border-radius: 12px;
    background-color: rgba(0, 0, 0, 0.4);
}

.t-text {
    display: inline-block;
    text-decoration: inherit;
}
回复
1个回答
avatar
test
2024-07-20

可以使用 <text> 来替换 <view> 来盛放文字,并且把 display: inline-block 属性移除。例如

<view>
    <text class="highlight t-text"> ** </text>
    <text class="t-text"> 东西不错非常满意下次还来好耶好耶 </text>
</view>

或者把 .t-textdisplay 修改为 inline 即可解决问题。

回复
likes
适合作为回答的
  • 经过验证的有效解决办法
  • 自己的经验指引,对解决问题有帮助
  • 遵循 Markdown 语法排版,代码语义正确
不该作为回答的
  • 询问内容细节或回复楼层
  • 与题目无关的内容
  • “赞”“顶”“同问”“看手册”“解决了没”等毫无意义的内容