问题描述
我想删除< 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换行吗?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!