在弹性方向的上下文中，如何使nodeType == Node.ELEMENT_NODE的行为类似于nodeType == Node.TEXT_NODE：列CSS

如何解决在弹性方向的上下文中，如何使nodeType == Node.ELEMENT_NODE的行为类似于nodeType == Node.TEXT_NODE：列CSS

您可以在div._b5a下面看到带有flex-direction: column的flex容器。 但是，通常它的子级只是一个文本语句（nodeType == Node.TEXT_NODE）：新增個人簡介，讓大家更瞭解你，因此该文本语句在水平方向上仍位于同一行中。那是常态。

但是在安装this Chrome extension以学习日文汉字之后，它通过突出显示我想学习的日文汉字对我有所帮助。它通过将文本包装在<mark style="background: green">中来突出显示文本（如下面的HTML代码段的第2行和第4行）。它可以正常工作，直到以下情况（当其父级为带有flex-direction: column的flex容器时）将句子分成3行而不是1行。

我该如何解决？ 在这种情况下，要突出显示文本，请将该句子保持在第一行。您可以查看扩展名here的代码。

提示：添加

flex-direction: row;
justify-content: center;

对div的

拥有该句子，它适用于特定情况，但是我不确定如何解决the code from the extension使其起作用。 （我对Jquery不好）

._b5a {
    align-content: flex-start;
    align-items: stretch;
    -webkit-appearance: none;
    background-color: transparent;
    border: 0;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    margin: 0;
    min-width: 0;
    padding: 0;
    position: relative;
    /* flex-direction: row;
    justify-content: center; */
}

div {
    display: block;
}
.fbTimelineUnit {
    color: #1c1e21;
    display: block;
    margin-bottom: 10px;
    position: relative;
}

<div class="_b5a" style="text-align: center; opacity: 0.7;">新增個人簡介，讓
<mark class="wkh-hl" style="background-color: green; color: inherit;">
大
</mark>
家更瞭解你。</div>

解决方法

最接近的操作是将显示设置为contents，这将使问题中的mark元素像普通的文本节点一样工作，但是要权衡的是，您会失去设置容器样式的能力，这意味着您无法设置任何与容器相关的样式，例如background-color，border，padding ...

但是如果您只想突出显示特定文本。您仍然可以使用color或font-weight属性使文本更突出。这是一个例子

._b5a {
    align-content: flex-start;
    align-items: stretch;
    -webkit-appearance: none;
    background-color: transparent;
    border: 0;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    margin: 0;
    min-width: 0;
    padding: 0;
    position: relative;
    /* flex-direction: row;
    justify-content: center; */
}

div {
    display: block;
}
.fbTimelineUnit {
    color: #1c1e21;
    display: block;
    margin-bottom: 10px;
    position: relative;
}

mark {
    display: contents;
    color: red !important;
    font-weight: bold;
}

<div class="_b5a" style="text-align: center; opacity: 0.7;">新增個人簡介，讓
<mark class="wkh-hl" style="background-color: green; color: inherit;">
大
</mark>
家更瞭解你。</div>