2011-12-29 4 views
4

私は最大幅の境界ボックスを作成しようとしていますが、これはテキストをスペースで区切り(単語区切りは許されません)とシュリンクラップの両方でテキストの最長行の幅にします。 http://www.brunildo.org/test/IEMshrink-to-fit.htmlCSSの "シュリンクラップ"方式は、最大幅で、BR改行タグなしでどのように動作しますか?

"float"メソッドを選択しましたが、テストでは目的の効果を達成できませんでした。

以下のサンプルコード(ライブプレビューではjsbinでも利用可能)では、単語をラップするとどうなるかを示し、<br />改行タグを挿入するとどうなりますか。 <br />を手動で使用すると、私が探しているエフェクトが正確に表示されますが、省略するとテキストは正しくラップされますが、白いボックスの幅全体を最大幅にすることを避けます。ここで

<style> 
    div#wrapper { background: #ddd; padding: 10px; } 
    header { display: block; float: left; max-width: 320px; background: #fff; margin-bottom: 20px; clear: both; } 
    #wrapper:after { content: " "; clear: both; display: table; } 
</style> 

<div id="wrapper"> 
    <header> 
    <h1>Diane Von Furstenberg</h1> 
    </header> 
    <header> 
    <h1>Diane Von<br />Furstenberg</h1> 
    </header> 
</div> 

は、いくつかの精緻化に伴う問題のスクリーンショットです:

Screenshot of Shrinkwrap CSS issue

私は手動でその場しのぎの対策として<br />タグを挿入するJSメソッドを作成しましたが、私はそこにある必要があります想像しますCSS/HTMLだけを使って適切にこれを行ういくつかの方法。助けてくれてありがとう!

+0

何が起こっているのか、何が起こるのかを示す画像を追加できますか?あなたのコードを含め、あなたの問題を再現するのは、通常は十分です(あなたがやった)が、この場合、私は問題が何であるかは明らかではないと思います。 –

+0

@MyHeadスクリーンショットで質問を更新している間は、しばらくお待ちください。 – Nano

+0

私は、ラッパーが完全に使用されているスペースを数えているので、それを行うことはできないと思います。(それで十分ではないので、ラップする必要があります。あなたはJSでそれをすることができますかhttp://jsbin.com/ipixiy/edit#html,liveと同様の効果を持って行くことができます – mreq

答えて

1

h1からtable-captionへの表示を、Google Chromeで目的に近いものに変更できます。しかし、それは完璧ではないし、他のどのブラウザでもテストしていないために、本当に解決策として全面的に推薦することはできない。

+0

私のテストによって最新のChromeとFFで動作します。他の誰かがIE 7で確認できたら、私はこの答えを受け入れるでしょう。ヒントをありがとう! – Nano

+0

[このサイト](http://www.browsersupport.net/CSS/display%3Atable-caption)によるIE8 +、Chrome(すべて)、FF(すべて)、Opera 8+、Safari(すべて) –

+0

これはおそらく一般的なケースでは望んでいないでしょう。私のスクリーンショットの答えを見てください。 – Martin

0

早くない「テーブルキャプション」の答えが掲載されましたが、それは現在(クロム41を使用して)動作しませんので、ブラウザの動作が変更されているかどうかわから:現実に

enter image description here

、それはそう純粋なCSSでは(2015年時点で)望ましい動作が不可能です。さらに詳しい説明と軽量なJavascriptの回避策は、別のSO質問で利用できます。max-width adjusts to fit text?

関連する問題