85

'sを削除し、<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 }

いじる

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/>このコース外で使用する前に、を削除してください。

于 2013-02-12T11:54:39.660 に答える
2

<p>s（<div>sとsのみ）を使用しなくても問題がない場合<span>、このソリューションでは、必要に応じて、sを中央または右に揃えることもできますinline-block（または、最初に要求した方法でそのままにしておくこともできます）。解決策はまだsで機能する可能性がありますが、結果のHTMLコードが完全に正しい<p>とは思いませんが、とにかくそれはあなた次第です。

秘訣は、それぞれを<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 に答える