收藏
回答

如何加粗部分字体且不换行?

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;  /** 好像对设置不换行不起作用 **/
}

我需要如何实现需要的功能呢? 谢谢大家!

回答关注问题邀请回答
收藏

4 个回答

  • ×
    ×
    02-28

    html里面分为行内标签和块级标签,view(div)是块级标签默认换行,你可以用text(span)标签包裹要加粗的内容


    02-28
    有用 1
    回复
  • 0
    0
    02-28

    <view style="display: flex;"><view>A:</view><view style="font-weight: bold;">1</view></view>


    02-28
    有用 1
    回复 4
    • xx
      xx
      02-28
      我写了如下代码后,发现确实可以在一行中设置某些字为粗体了,谢谢大佬!但是我发现我没办法在两个text标签之间加入空格,我键入的空格会被忽略,你指定这个怎么解决吗?谢谢!
      (我想要的效果是"XP: 0 Health: 100 Gold: 50",中间有空格分开)
      02-28
      回复
    • 0
      0
      02-29回复xx
      <view style="display: flex;">
        <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>
      02-29
      1
      回复
    • 0
      0
      02-29回复xx
      在stat的class中加上margin-right: 20rpx就可以了
      02-29
      回复
    • xx
      xx
      02-29回复0
      嗯嗯,好的,谢谢大佬
      02-29
      回复
  • краб
    краб
    02-28
    <view>XP: <text class="setBold">{{xpText}}</text></view>
    


    02-28
    有用 1
    回复
  • 那一抹笑😃 穿透阳光
    那一抹笑😃 穿透阳光
    02-28

    单独用标签框起来啊

    02-28
    有用
    回复
登录 后发表内容