用inline-block换行吗? [英] Breaking to a new line with inline-block?

问题描述

我想删除< br/> 并通过CSS进行换行.如果将跨度更改为 display:block ，则宽度将变为100％，并且我需要将宽度精确地设为文本的长度，就像现在一样.有什么建议吗?

I want to remove the <br />'s and do the break lines through CSS. If I change the spans to display:block the width will go 100% and I need the width to be exactly the length of the text, like it is now. Any suggestions?

<div class="fullscreen">
    <p class="text">
        <span class="medium">We</span> <br />
        <span class="large">build</span> <br />
        <span class="medium">the</span> <br />
        <span class="large">Internet</span>
    </p>
</div>

.text span {
   background:rgba(165, 220, 79, 0.8);
   display:inline-block;
   padding:7px 10px;
   color:white;
}
.fullscreen .large {  font-size:80px }

问题

推荐答案

删除所有 br 标签并使用 display:table .

.text span {
   background: rgba(165, 220, 79, 0.8);
   display: table;
   padding: 7px 10px;
   color: white;
}
.fullscreen .large { font-size: 80px }

说明:该表默认情况下包装其内容的宽度而不设置宽度，但仍是块级元素.您可以通过将宽度设置为其他块级元素来获得相同的行为:

Explanation: The table wraps the width of its content by default without setting a width, but is still a block level element. You can get the same behavior by setting a width to other block-level elements:

<span style="display:block;border:1px solid red;width:100px;">Like a default table.</span>
<code>null</code>

请注意，< code> 元素不会像通常那样与&span> 内联.在您的开发工具中使用计算出的样式进行检查.您会在< span> 的右侧看到伪边距.无论如何，这与表格相同，但是表格具有始终按照其内容的宽度来形成表格的额外好处.

Notice the <code> element doesn't flow inline with the <span> like it would normally. Check it out with the computed styles in your dev tools. You'll see pseudo margin to the right of the <span>. Anyway, this is the same as the table, but the table has the added benefit of always forming to the width of its content.

这篇关于用inline-block换行吗?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！