防止长于 1 行的行内块元素之间的换行

Question

关于格式化的问题 HTML 5 个行内块元素：两个短的内联块元素（短于一行）整齐地包裹在一行中。如果它们长于一行，则在它们之间插入一个换行符会破坏我的布局。假设我有 HTML 这样的

<!DOCTYPE html>
<html>
<head>
    <style>
        .my-div {font-size: 0;}
        .my-span { display: inline-block; font-size: 17px; line-height: 1.4em; }
        .a { background-color: Aquamarine; }
        .b { background-color: LightPink; }
        .c { background-color: LightSteelBlue; }
    </style>
</head>
<body><div class="my-div">
        <span class="my-span a">Pellentesque eget dolor eu est finibus tincidunt. Suspendisse dapibus pellentesque mauris ac iaculis. Sed tincidunt rutrum massa quis blandit. Integer rhoncus scelerisque justo eu dapibus. Nam varius eros velit, ut feugiat mauris posuere eu. Aliquam justo nibh, pulvinar vel ipsum sed, euismod placerat nulla.&nbsp;</span><span class="my-span b">Vestibulum blandit erat nec sodales vestibulum. Proin nulla est, feugiat dapibus risus dignissim, egestas pulvinar magna. Interdum et malesuada fames ac ante ipsum primis in faucibus. Morbi ut aliquet velit. Donec sodales euismod arcu, eget pulvinar est convallis id. Suspendisse potenti. &nbsp;</span><span class="my-span c">Aenean imperdiet nisi tristique est tincidunt, eget gravida augue porta. Sed mauris risus, consectetur eget convallis sed, maximus eu turpis. Donec ultricies mattis accumsan. Sed posuere ex bibendum, cursus odio sit amet, tincidunt lacus.&nbsp;</span><span class="my-span a">Short text&nbsp;</span><span class="my-span b">More Short text</span>
    </div>
</body>
</html>

在 Chrome 83.0.4103.106 中 HTML 看起来像这样：如您所见，底部的两个短文本整齐地排成一行。但是，在较长的跨度之后是浏览器插入的换行符。我怎样才能摆脱额外的换行符，并像短跨度一样显示较长的跨度，直接相互连接，不插入换行符？

如有任何帮助，我们将不胜感激。

Answer 1

将 'my-span' class 的显示属性更改为内联。

display: inline;

但行高不适用

Answer 2

内联块 元素的宽度由其内容自动确定。由于第一个跨度元素占据了行的最大宽度，第二个元素被换行到下一行，第三个跨度也一样。最后两个元素在同一行，因为它们有足够的 space 可以占用。

简单的解决方案是将 display : inline-block 更改为 display:inline

防止长于 1 行的行内块元素之间的换行

Preventing line breaks between inline-block elements longer than 1 line

html

css

rendering