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

xiaobe
  • 193
浙江

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

同样的代码在 h5 里是 ok 的,如下:
例如:
image.png

在小程序里就有问题,如下:
image.png

大致代码如下
image.png

// 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.1k
2 个回答
✓ 已被采纳

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

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

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

把view换成text,在浏览器中就是span

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
宣传栏