时间戳

首页 > 解决方案 > 当 inline-block 内容很长时如何防止 inline-block 换行

javascript - 当 inline-block 内容很长时如何防止 inline-block 换行

问题描述

当inline-block的红色文字较短时，正常显示。但是当inline-block的红色文字超过屏幕长度或内容过长时，红色文字会与其他文字换行显示。我想要的结果是当红色文字太长时，不需要换行。

<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>

在此处输入图像描述

标签： javascripthtmlcssreactjs

解决方案

如果我正确理解了这个问题，这就是您所要求的，请将您的文本包装在<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>

推荐阅读