私は最大幅の境界ボックスを作成しようとしていますが、これはテキストをスペースで区切り(単語区切りは許されません)とシュリンクラップの両方でテキストの最長行の幅にします。 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>
は、いくつかの精緻化に伴う問題のスクリーンショットです:
私は手動でその場しのぎの対策として<br />
タグを挿入するJSメソッドを作成しましたが、私はそこにある必要があります想像しますCSS/HTMLだけを使って適切にこれを行ういくつかの方法。助けてくれてありがとう!
何が起こっているのか、何が起こるのかを示す画像を追加できますか?あなたのコードを含め、あなたの問題を再現するのは、通常は十分です(あなたがやった)が、この場合、私は問題が何であるかは明らかではないと思います。 –
@MyHeadスクリーンショットで質問を更新している間は、しばらくお待ちください。 – Nano
私は、ラッパーが完全に使用されているスペースを数えているので、それを行うことはできないと思います。(それで十分ではないので、ラップする必要があります。あなたはJSでそれをすることができますかhttp://jsbin.com/ipixiy/edit#html,liveと同様の効果を持って行くことができます – mreq