当内联块的红色文本较短时，它会正常显示。但是，当内联块的红色文本超过屏幕长度或内容过长时，红色文本将与其他文本一起显示为换行符。我想要的结果是，当红色文本太长时，没有必要换行。
<html>
<head>
</head>
<body>
<p>
<span>green and</span>
<span style='color:red; display:inline-block;vertical-align:top'>blue, green and blue Pink，purple, <span style="border-top:1px solid blue;red:red;display:block">Text annotation</span> </span> orange, black and white, Pink，purple, orange, black and white, stand up, sit down, turn around. Pink，purple, orange, black and white.3. BingoThere was a farmer had a dog, and bingo was h
<span>day friday Saturdaysunday monday tuesday wednesday thursday friday Saturday6. Little pigOink oink little pig Oink oink oink little pig Oink oink little pig Oink oink oink little pig7. I ‘m hungryI'm a little hungry,I'm hungry.Have som</span>
</p>
</body>
</html>
在此处输入图像描述
如果我正确理解了这个问题，这就是你想要的，将你的文本包装在<p>标签中，它就不会被分离
.long-text {
color : red;
}<p class="container">
green and
<span class="long-text">blue, green and blue Pink，purple, orange, black and white, Pink，purple, orange, black and white, stand up, sit down, turn around. Pink，purple, orange, black and white.3. BingoThere was a farmer had a dog, and bingo was h</span>
day friday Saturdaysunday monday tuesday wednesday thursday friday Saturday6. Little pigOink oink little pig Oink oink oink little pig Oink oink little pig Oink oink oink little pig7. I ‘m hungryI'm a little hungry,I'm hungry.Have som
</p>正如您所说，您只需要添加一个容器来包装内容。