收藏
回答

navigator的文字如何能不换行?

<navigator url="/page/navigate/navigate?title=navigate" hover-class="navigator-hover">跳转到新页面</navigator>

<navigator url="../../redirect/redirect/redirect?title=redirect" open-type="redirect" hover-class="other-navigator-hover">在当前页打开</navigator>

这个代码的效果是文字会分开两行展示  效果如下:

我想要放到同一行 试过在navigator中申明 style="word-break:keep-all;" 和 style="white-space: nowrap;"

但是不起效果 求高手指导

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

2 个回答

  • Hlxuan.
    Hlxuan.
    2023-09-02

    方法有很多,我列举两个:

    一个是使用display属性将 navigator 转成行内或行内块级元素。

    // 行内元素
    display: inline;
    // 行内块级元素
    display: inline-block;
    

    一个是使用flex布局。

    <view style="display: flex;">
      <navigator url="/page/navigate/navigate?title=navigate" hover-class="navigator-hover">跳转到新页面</navigator>
      <navigator url="../../redirect/redirect/redirect?title=redirect" open-type="redirect" hover-class="other-navigator-hover">在当前页打开</navigator>
    </view>
    
    2023-09-02
    有用 1
    回复 1
    • 坤
      2023-09-02
      可以用 感谢
      2023-09-02
      回复
  • Young nbe
    Young nbe
    2023-09-03

    根据你的描述,你想要让 <navigator> 标签内的文字在同一行显示,而不是分行显示。这可能是由于HTML默认的行高(line-height)或者内联元素(inline elements)的特性导致的。

    你可以尝试以下几种方法来解决这个问题:

    调整行高(line-height):将行高设置为一个较小的值,可以尝试设置为1.5em或者1.2em。例如:

    <navigator style="line-height: 1.5em;">跳转到新页面</navigator>
    
    <navigator style="line-height: 1.5em;">在当前页打开</navigator>
    

    将标签设置为块级元素(block elements):你可以通过CSS将 <navigator> 标签设置为块级元素,这样它就会独占一行。例如:

    <navigator style="display: block;">跳转到新页面</navigator>
    
    <navigator style="display: block;">在当前页打开</navigator>
    

    设置标签为内联块级元素(inline-block elements):内联块级元素既保留了内联元素的特性(比如不独占一行),又具有块级元素的特性(比如可以设置宽高)。例如:


    <navigator style="display: inline-block;">跳转到新页面</navigator>
    
    <navigator style="display: inline-block;">在当前页打开</navigator>
    


    以上方法应该可以帮助你解决问题。如果问题仍然存在,请提供更多的代码和上下文信息,以便我能够更好地理解你的问题并提供更准确的帮助。宠物百科


    2023-09-03
    有用
    回复
登录 后发表内容