7

さて、私がやりたいことは、その中にあるコンテンツに基づいて自動サイズ調整される DIV を作成することですが、可能な限り最小の幅を使用する必要があります。これを行う方法についての手がかりがありません。

したがって、間違いなく幅が 200px 未満の 3 文字の DIV タグがある場合、div を 200px にする必要があります。もっと多くのテキストがある場合は、テキストが収まるように自動サイズアップしたいと思います。

**これは ***CSS* だけで可能ですか?****

**更新**

これをもっとうまく説明できるかどうか見てみましょう。私はDIVを持っています:

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

私が望んでいるのは、テキストが変更された場合でも、少なくとも 200px 幅になることです。このような：

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

ただし、最初の例よりも長いテキストの場合、幅 200px を超えて外側に拡大し続けます。

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

ただし、制限 (限られたスペース) があるため、最大幅を設定する必要があります。それは理にかなっていますか、それとももっと明確にする必要がありますか?

4

3 に答える 3

7

問題は、<div>s がブロック レベルの要素であるため、幅を明示的に定義できるにもかかわらず、コンテンツに合わせて自動サイズ変更されないことです。インライン要素は、コンテンツに合わせて自動サイズ調整を行いますが、 CSS<span>で幅を定義することはできません。回避策は、何らかの方法で表のセルのように振る舞うことです。次に例を示します。<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>

(もはや完全なブロックレベルではないため<br/>、 の前にを追加しなければならなかったことに注意してください)。 レンダリングすると次のようになります: これは Firefox、Chrome、および IE8 で動作するようです (IE8 の場合は DOCTYPE を指定する必要があります)。それが役に立ったことを願っています！<div>
レンダリングされた上記の例

于 2012-08-10T12:59:29.347 に答える
2

You can "shrink-wrap" a div in a few different ways. The easiest is probably to display: inline; but a float will behave like you describe as well.

Check out http://haslayout.net/css-tuts/CSS-Shrink-Wrap for details and more methods.

If you want the minimum width to be 200px (contradictory to your first paragraph) you can use min-width: 200px; along with display: inline-block for instance.

于 2012-08-09T19:52:16.357 に答える
1

あなたが何を求めているかを正しく理解していれば、<div>s はブロック要素です。つまり、デフォルトでは、行全体(画面幅の100% ) を占めます。<span>代わりに要素を使用してみてください。

お役に立てば幸いですが、実行しようとしている動作や達成しようとしている動作を指定していただければ、さらにお役に立てます。

于 2012-08-09T19:52:02.893 に答える