85

我想删除<br />'s并通过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 }

小提琴

4

7 回答 7

133

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

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

说明：表格默认包裹其内容的宽度，不设置宽度，但仍然是块级元素。您可以通过为其他块级元素设置宽度来获得相同的行为：

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

请注意，该<code>元素不会<span>像通常那样内联。使用开发工具中的计算样式检查它。您会在<span>. 无论如何，这与表格相同，但表格具有始终形成其内容宽度的额外好处。

于 2013-02-12T11:56:19.727 回答
39

使用float: left;和clear: left;

http://jsfiddle.net/rtM6J/

.text span {
   background: rgba(165, 220, 79, 0.8);
   float: left;
   clear: left;
   padding: 7px 10px;
   color: #fff;
}
于 2013-02-12T11:52:53.927 回答
14

将物品放入display: inline并使用:after：

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

并将该类添加到您的 html 跨度中：

<span class="medium break-after">We</span>
于 2016-11-28T08:21:41.643 回答
12

我认为截至 2018 年最好的方法是使用 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>

于 2018-11-06T00:02:49.733 回答
11

这是另一种解决方案（仅列出相关声明）：

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

当边距以百分比表示时，该百分比取自父节点的宽度，因此 100% 表示与父节点一样宽，这导致下一个元素被“推”到新行。

于 2018-01-26T10:25:15.707 回答
3

我认为浮动在这里可能最适合您，如果您不希望元素占据整行，则将其向左浮动应该可以。

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

注意：<br/>在使用此课程之前删除 's。

于 2013-02-12T11:54:39.660 回答
2

如果您可以不使用<p>s（仅使用<div>s 和<span>s），此解决方案甚至可以让您将inline-blocks 居中或右对齐，如果您愿意（或者按照您最初要求的方式将它们保持在左侧）。虽然该解决方案可能仍适用于<p>s，但我认为生成的 HTML 代码不会完全正确，但这取决于您。

诀窍是<span>用相应的<div>. <div>通过这种方式，我们利用了由's （默认）引起的换行符display: block，同时仍将可视绿色框保持在文本的限制范围内（使用您的display: inline-block声明）。

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

于 2016-11-28T19:38:41.250 回答