3

私が取り組んでいるこのスライダーでは、スライドの説明で、テキストの後ろにオレンジ色の背景があり、行の最初と最後に少しパディングがあるようにします。p タグの表示をインラインに変更しました。これは 1 行のみの場合に機能しますが、テキストが次の行に折り返されると、CSS は左/右のパディングを最初の行の左側と右側にのみ適用します。最後の行。

コンテナーの全幅のサイズのオレンジ色の四角形を使用せずに、テキストの各行の左右にパディングを配置するにはどうすればよいですか?

「Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis nec purus tellus, quis pulvinar tortor. Sed m​​attis lobortis gravida. Lorem ipsum dolor sit amet.」というスライダーのテキストです。

http://www.brainbuzzmedia.com/themes/simplybusiness/

このpタグの CSS は次のとおりです。

.camera_caption p {
    background: none repeat scroll 0 0 #FFAA3B;
    color: #000000;
    display: inline;
    font-size: 1.7em;
    margin: 0;
    padding: 3px 7px;
}
4

4 に答える 4

13

更新: Chris Coyier は、この回答の 3 か月後に投稿されたテクニックのまとめを行いました。特に、box-decoration-breakFirefox 32 (2014 年 2 月 9 日リリース) でサポートされるようになったものがあります。

最新のソリューション。Webkit、Firefox 32 以降、IE11 以降:

p {
    display: inline;
    background-color: #FFAA3B;
    padding: 0.5em 1em;
    box-decoration-break: clone;
}

デモ: http://jsfiddle.net/cLh0onv3/

IE9+、Webkit、Firefox をサポートするには、以下を使用しますbox-shadow。

p {
    display: inline;
    background-color: #FFAA3B;
    box-shadow: 1em 0 0 #FFAA3B, -1em 0 0 #FFAA3B;
    padding: 0.5em 0em;
    box-decoration-break: clone;
}

デモ: http://jsfiddle.net/cLh0onv3/1/

以下の古いbox-shadow方法：

p {
    display: inline;
    background-color: #FFAA3B;
    box-shadow: 1em 0 0 0 #FFAA3B, -1em 0 0 0 #FFAA3B;
    position: relative;
    left: 1em;
}

デモ: http://jsfiddle.net/5xMkm/2/ - これについては @martijndevalk から初めて聞いたので、彼に敬意を表します。@gabitzish も2012 年にこれを示しました。

注 : このbox-shadowトリックは、IE11 および FF34 では正しく機能しなくなりました。機能させるために追加box-decoration-break: clone;するか、上記の更新を参照してください。

于 2013-08-14T00:30:24.100 に答える
2

少し遅れるかもしれませんが。<p>これは、テキストの各行を定義するためにタグが必要ないことを意味します

http://jsfiddle.net/n6UYE/4/

于 2012-10-12T01:05:13.100 に答える
2

box-shadow を使用することはお勧めしません。IE の不具合で動作するためです。

https://dl.dropboxusercontent.com/u/1206404/ie-bug.png

Webkit/firefox の場合は「box-decoration-break: clone」、ie の場合は「white-space: pre-wrap」を使用してソリューションを投稿しました。

https://stackoverflow.com/a/26677158/337549

于 2014-10-31T14:48:47.260 に答える
1

このフィドルをチェックしてください。

これが唯一の方法ではありませんが、p各行に異なるタグを割り当てて同じclass nameものを与えることでこれを行うことができます。

HTML

 <div><p>Lorem ipsum dolor sit amet, consectetur</p><br>
 <p>adipiscing elit. Duis nec purus tellus, quis pulvinar</p><br>
 <p>tortor. Sed mattis lobortis gravida. Lorem ipsum</p><br>
 <p>dolor sit amet.</p></div>​

CSS

 p
{
  background-color:rgba(255,165,0,0.2);
  padding:0 15px 0 15px;   
  display:inline;
  border-radius:15px;
  text-shadow:0px 0px 0px rgba(255, 210, 82, 1);
}
div{margin:15px;}
于 2012-10-01T11:04:40.197 に答える