用内联块切换到新行？

我想删除的 <br />的和做断线通过 CSS。如果我改变跨度到 display:block的宽度将去100% ，我需要的宽度正好是文本的长度，就像现在一样。有什么建议吗？

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

小提琴

171968 次浏览
小开

use float: left; and clear: left;

http://jsfiddle.net/rtM6J/

.text span {
background: rgba(165, 220, 79, 0.8);
float: left;
clear: left;
padding: 7px 10px;
color: #fff;
}
小开

I think floats may work best for you here, if you dont want the element to occupy the whole line, float it left should work.

.text span {
background:rgba(165, 220, 79, 0.8);
float: left;
clear: left;
padding:7px 10px;
color:white;
}

Note:Remove <br/>'s before using this off course.

小开
最佳答案

Remove all br tags and use 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>

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.

小开

Set the items into display: inline and use :after:

.text span { display: inline }
.break-after:after { content: '\A'; white-space:pre; }

and add the class into your html spans:

<span class="medium break-after">We</span>
小开

If you're OK with not using <p>s (only <div>s and <span>s), this solution might even allow you to align your inline-blocks center or right, if you want to (or just keep them left, the way you originally asked for). While the solution might still work with <p>s, I don't think the resulting HTML code would be quite correct, but it's up to you anyways.

The trick is to wrap each one of your <span>s with a corresponding <div>. This way we're taking advantage of the line break caused by the <div>'s display: block (default), while still keeping the visual green box tight to the limits of the text (with your display: inline-block declaration).

.text span {
background:rgba(165, 220, 79, 0.8);
display:inline-block;
padding:7px 10px;
color:white;
}
.large {  font-size:80px }
<div class="text">
<div><span class="medium">We</span></div>
<div><span class="large">build</span></div>
<div><span class="medium">the</span></div>
<div><span class="large">Internet</span></div>
</div>

小开

Here is another solution (only relevant declarations listed):

.text span {
display:inline-block;
margin-right:100%;
}

When the margin is expressed in percentage, that percentage is taken from the width of the parent node, so 100% means as wide as the parent, which results in the next element getting "pushed" to a new line.

小开

I think the best way to do this as of 2018 is to use flexbox.

.text {
display: flex;
flex-direction: column;
align-items: flex-start;
}
/* same as original below */
.text span {
background:rgba(165, 220, 79, 0.8);
display:inline-block;
padding:7px 10px;
color:white;
}
.fullscreen .large {  font-size:80px }
<div class="fullscreen">
<p class="text">
<span class="medium">We</span>
<span class="large">build</span>
<span class="medium">the</span>
<span class="large">Internet</span>
</p>
</div>


提交答案