Hi all,
我想在小程序中显示如下文字:
”A:1 B:2 C:3" (这些内容现在在同一行;其中ABC不变,123的值会发生变化;注意123是粗体字)
我可以通过一个view标签将以上内容显示在同一行,但是却不能加粗指定文字:
<view>A:{{aVal}} B:{{bVal}} C:{{cVal}}</view>
当我给需要加粗的内容又加上一个view标签后,内容又换行了:
// wxml
<view>XP: <view class="setBold">{{xpText}}</view></view>
// wxss
.setBold {
font-weight: bold;
word-break: keep-all; /** 好像对设置不换行不起作用 **/
}
我需要如何实现需要的功能呢? 谢谢大家!
html里面分为行内标签和块级标签,view(div)是块级标签默认换行,你可以用text(span)标签包裹要加粗的内容
<view style="display: flex;"><view>A:</view><view style="font-weight: bold;">1</view></view>
(我想要的效果是"XP: 0 Health: 100 Gold: 50",中间有空格分开)
<view style="display: flex;">
<text class="stat">XP: <text style="font-weight: bold;">{{xpText}}</text></text>
<text class="stat">Health: <text style="font-weight: bold;">{{healthText}}</text></text>
<text class="stat">Gold: <text style="font-weight: bold;">{{goldText}}</text></text>
</view>
<text style="margin-right: 20rpx;">XP: <text style="font-weight: bold;">0</text></text>
<text style="margin-right: 20rpx;">Health: <text style="font-weight: bold;">100</text></text>
<text style="margin-right: 20rpx;">Gold: <text style="font-weight: bold;">50</text></text>
</view>
<view>XP: <text class="setBold">{{xpText}}</text></view>
单独用标签框起来啊