Question

我的问题不是重复Prevent line-break of span element，我需要简单地强调一行文字的部分。

下划线用于标记对一段文本的修订。这是组织在其所有法律文件中标记修订的标准方法。这不是一个选择。我不能只说'＃34;我会制作这个红色文字而不是下划线＆＃34;或类似的东西。它必须加下划线的文字。

我遇到的问题是当我使用span标记时会强制换行。

例如，我只想要＆＃34; 13＆＃34;在下面的文字中加下划线：

4.13此部分的名称为Foo。

如果我使用

<p class="textStyle_1">4.<span class="revMark">13 </span>Plug and Slot Welds</p>

span标记中的样式为：

.revMark {
  text-decoration: underline;
}

我明白了：

4

13

此部分的名称为Foo。

（13有下划线，但我，显然不想换行。）

如果我使用这种风格：

.revMark {
  text-decoration: underline;
  white-space: nowrap;
}

正如上面问题中显示的答案所示，我仍然可以获得换行符。

我也尝试在p标签上使用nowrap，如：

<p class="noWrapping">4.<span class="revMark">13 </span>Plug and Slot Welds</p>

风格在哪里：

.revMark {
  text-decoration: underline;
}

.noWrapping {
  white-space: nowrap;
}

这些都不起作用。我总是得到换行符。我甚至尝试使用<u></u>标记，但它也会产生换行符。

我在另一个网站上看到Chrome有一些错误导致它忽略了css中的nowrap。我不知道这是不是真的。

我没有在任何其他浏览器上尝试过，因为我的项目不会在其他浏览器上查看。它将是一个使用Electron构建的桌面应用程序。 Electron是围绕Chromium构建的，所以如果它在Chrome中看起来不对，那么它在Electron中就会出错。

更新：

这似乎与网格布局有关。如果我在下面的css中注释掉display: inline-grid;，则换行符就会消失。但是删除它会导致我的网格布局出现其他问题。

.textStyle_1 {
  display: inline-grid;
  font-size: 12px;
  font-weight: 400;
  line-height: normal;
  margin: 0px;
  padding-top: 3px;
  padding-right: 2px;
  padding-bottom: 2px;
  padding-left: 3px;
}

Answer 1

问题来自于display: inline-grid类中的.textStyle_1，删除了显示：内联网格，一切正常

    
    .revMark {
      text-decoration: underline;
    }
    
    .noWrapping {
      white-space: nowrap;
    }
    
    .textStyle_1 {
      /*display: inline-grid;*/
      font-size: 12px;
      font-weight: 400;
      line-height: normal;
      margin: 0px;
      padding-top: 3px;
      padding-right: 2px;
      padding-bottom: 2px;
      padding-left: 3px;
    }

    <p class="textStyle_1">4.<span class="revMark">13 </span>Plug and Slot Welds</p>

CSS Span标签导致换行符 - 使用网格布局时

1 个答案: