最小幅、最大幅のCSS最小幅を使用

申し訳ありませんので、私はそれに含まれるコンテンツに基づいて自動サイズ調整するDIVを作成することを望んでいますが、できるだけ小さい幅を使用する必要があります。私はこれを行う方法の手掛かりを持っていません。最小幅、最大幅のCSS最小幅を使用

したがって、200ピクセル幅以下の疑問がない3文字のDIVタグを使用している場合、私はdivが200ピクセルになるようにしたいと考えています。もっと多くのテキストがある場合は、テキストが収まるように自動サイズアップしたいと思います。

はちょうど*** CSSでこれは可能です*？****

** UPDATE **

が、私はこれは良く説明できるなら、私は見てみましょう。私は、DIVを持っている：私は起こる持って期待しています何

+++++++++++++++++++++++++++++++++ 
|-------------------------------| 
|-----text this longer text-----| 
|-------------------------------| 
+++++++++++++++++++++++++++++++++

は、テキストが変更された場合、それはまだ、少なくとも200pxの広いだろうです。

+++++++++++++++++++++++++++++++++ 
|-------------------------------| 
|-------------text--------------| 
|-------------------------------| 
+++++++++++++++++++++++++++++++++

しかし、それは、最初の例でも、長いテキストだった場合、それは200pxの幅の広い過ぎて外側に拡張していきます：

++++++++++++++++++++++++++++++++++++++++++++++++++++++ 
|----------------------------------------------------| 
|-----text this longer texttext this longer text-----| 
|----------------------------------------------------| 
++++++++++++++++++++++++++++++++++++++++++++++++++++++

は、しかし、私はスペースの制限（制限量を持っています。このような）それは行くことができるので、私はそれに最大の幅を置く必要があります。それは意味をなさないか、もっと物事を明確にする必要がありますか？ 100％画面幅の - 私はあなたが正しくについて尋ねているものを理解している場合

出典

2012-08-09 user1470118

JavaScriptを使用する必要があります。 – starbeamrainbowlabs

<div>はブロックレベルの要素なので、幅は明示的に定義できますが、内容に合わせて自動サイズ変更されません。 <span>などのインライン要素は、内容に合わせて自動サイズを設定しますが、幅を定義することはできません。CSS。回避策は、<div>をテーブルセルのように動作させることです。ここでは例です：

CSS：

.widthlim { 
    min-width: 200px; 
    max-width: 1000px; 
    background-color: red; /*This is just for us to be able to see the width*/ 
    display: table-cell; 
    word-wrap: break-word; 
    word-break: break-word; 
}

HTML：

Example 1:<br/> 
<div class = "widthlim"> 
Hello 
</div> 
Example 2:<br/> 
<div class = "widthlim"> 
Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello 
</div> 
Example 3:<br/> 
<div class = "widthlim"> 
Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello 
</div>

（私たちは、彼らはもはや完全にブロックレベルじゃないんだので<div>秒前に<br/>秒を追加する必要がありました注意してください）。
レンタル時の表示方法は次のとおりです。 The above example rendered これはFirefox、Chrome、IE8（IE8ではDOCTYPEを指定する必要があります）で動作するようです。私はそれが助けて欲しい！