时间戳

首页 > 解决方案 > 如何在 flex-direction: 列 CSS 的上下文中使 (nodeType == Node.ELEMENT_NODE) 的行为类似于 (nodeType == Node.TEXT_NODE)

html - 如何在 flex-direction: 列 CSS 的上下文中使 (nodeType == Node.ELEMENT_NODE) 的行为类似于 (nodeType == Node.TEXT_NODE)

问题描述

你可以在下面看到div._b5a一个带有 flex-direction: column. 但是，通常它的孩子只是一个文本句子（nodeType == Node.TEXT_NODE）：新增個人簡介，讓大家更瞭解你所以文本句子仍然水平在同一行。这是常态。

但是为了学习汉字而安装了这个 Chrome 扩展程序后，它通过突出显示我想学习的汉字来帮助我。它通过将文本包装在 a 中来突出显示文本<mark style="background: green"> （如下面 HTML 片段中的第 2 行和第 4 行）。它工作正常，直到下面的情况，当它的父级是一个带有 的 flex 容器时flex-direction: column，它将句子分成 3 行而不是 1 行。

我该如何解决？在这种情况下，要突出显示文本，仍将句子保留在 1 line中。您可以在此处查看扩展的代码。

提示：通过添加

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

对于div拥有这句话，它适用于这种情况，但我不确定如何修复扩展中的代码以使其工作。（我不擅长 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>
家更瞭解你。&lt;/div>

标签： htmljquerycssflexbox

解决方案

您可以做的最接近的事情是将 display 设置为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>
家更瞭解你。&lt;/div>

推荐阅读