Below, you'll notice that the div._b5a is set as a flex container with flex-direction: column. Typically, its child is just a text sentence (nodeType == Node.TEXT_NODE):
新增個人簡介，讓大家更瞭解你However, after installing a helpful Chrome extension aimed at learning Kanji by highlighting specific characters I want to learn (available here), things changed slightly. The extension achieves this by wrapping the text inside a
<mark style="background: green">flex-direction: column, causing the sentence to break into three lines instead of one.
The question now becomes: How can this be fixed so that the highlighted text remains on a single line within the context of a flex container with flex-direction: column? Looking at the code of the extension might provide some insights (check it out here).
One potential solution involves adding the following CSS properties:
flex-direction: row;
justify-content: center;
This would apply directly to the owning div of the sentence but figuring out how to implement this fix within the existing extension code may not be straightforward, especially if you're not well-versed in 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>