CSSを使用して境界を最小限に囲むテキスト

Question

CSSとHTMLを使用してこれを行うにはどうすればよいですか？

フチテキストの境界が最小テキスト

フチテキストは、レンダリングされたとき

フチテキストの境界は、隣接要素

と重ならない最大幅を有する包囲着色境界に囲ま

1. フチテキスト

   alt text http://i29.tinypic.com/e026v4.pngのようになります。私が使用している境界の

   ：

   padding: 1.0em; 
   border-style: solid; 
   border-width: 2px; 
   background-color: #FFFFCC; 
   border-color:#E8E800; 
   

   私は<p>にCSSを適用する場合は、境界がブラウザのウィンドウと同じ幅です。私は境界線がテキスト（テキストサイズに応じて変わる）と同じ幅になるようにしたいので、widthを使って絶対幅を設定することはできません。私はdisplay:inlineを試しましたが、それはcauses spacing issues with neighboring elementsです。私も<p>に含まれている<span>に上記のCSSを適用しようとしましたが、テキストが長すぎてラップしても機能しません。

   alt text http://i25.tinypic.com/11jaxw5.png

Answer 1

floatというCSSプロパティを試してみましたか？ float：leftを指定すると、含まれている要素の幅がテキストに調整されます。これは副次的な効果のようですが動作します。

あなたが並ん含む要素をしたくない場合は、 あなたは< BR/>タグを追加することができますか あなたが追加することができます「クリア：両方;」スタイルに。

私は間違いなくそれが達成可能だと思います - 属性/値の適切な組み合わせを見つける必要があります。

Answer 2

私にはテーブルのように聞こえる...ああ、私はコメントやダウン票が既に来て見ることができます。 "表は表形式のデータのみです" ...うん、私は知っているが、彼らはまた、スティーブがやろうとしていることを正確に行うためのqnd方法でもある。

Answer 3

強調表示された段落を、ブロック要素として左に浮かせることで、テキストを最小限に囲むことができます（<p>はデフォルトです）。横に積み重ねられないように、段落をclear:leftにします。

CSS：

.pars { 
    /* this is used to prevent the last floating element 
    from causing issues below the paragraph (.pars) container */ 
    width: 100%; 
    overflow: visible; 
} 
.pars p { 
    clear: left; 
    margin: 0 0 0.5em 0; 
} 
.pars .highlighted { 
    float: left; 
    padding: 1.0em; 
    border-style: solid; 
    border-width: 2px; 
    background-color: #FFFFCC; 
    border-color:#E8E800; 
} 

あなたのHTML：

<div class="pars"> 
    <p>Some paragraph text</p> 
    <p class="highlighted">Some bordered text</p> 
    <p class="highlighted">Some more bordered text</p> 
    <p>Some very long bordered text blah blah blah 
    blah blah blah blah blah blah blah blah blah blah</p> 
</div> 

Answer 4

何の表示について：インラインブロック？

Answer 5

ただ、これは、同じ幅でそのテキストで要求されること、および既存の段落がハイライトされたもので水平に重なったことがないことを保証しますのみにハイライトされた段落の原因となります

p.highlighted { 
    float: left; 
} 

p { 
    clear: both; 
} 

を追加します。