5
私はこのようなヘッダを持っているウェブデザインの要件を持っている："float：left"と "float：right" divの両方に "text-overflow：省略記号"を付けるには？
+-------------------------------------------------------------+
| +---------------------+ +-------++------------------------+|
| | float left DIV A | | DIV C || float right DIV B ||
| +---------------------+ +-------++------------------------+|
+-------------------------------------------------------------+
ヘッダは、3つの部分があります事業部A、B、C DIV AはDIV B及びCであるのに対し、左側にフロートであるが右から浮かべる。 DIV AとDIV Bに長いテキストが含まれている可能性があります。したがって、オーバーフローしたテキストは省略記号として切り捨てられます。 DIV Cには短いテキストが含まれていますが、その内容は切り詰められません。
私は以下のようなHTMLを作ってみました：
<html>
<head>
<style>
.header
{
width: 100%;
border: 2px red;
overflow: hidden;
}
.DivA
{
float: left;
}
.DivC
{
float: right;
white-space:nowrap;
}
.DivB
{
float: right;
}
.clear
{
clear: both;
}
.DivA, .DivB
{
width: 40%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
</style>
</head>
<body>
<div class="header">
<div class="DivA">
Hello world 1 Hello world 2 Hello world 3
Hello world 1 Hello world 2 Hello world 3
Hello world 1 Hello world 2 Hello world 3
</div>
<div class="DivB">
Good bye Good bye
Good bye Good bye
Good bye Good bye
</div>
<div class="DivC">
No Ellipsis
</div>
<div class="clear">
</div>
</div>
</body>
</html>
テキストオーバーフロー：DIV AおよびDIV Bは、幅が（私の場合、私は45％であることをそれらを設定）している場合、省略記号のみ動作します。
しかし、DIV Cには1つの問題があります.DIV Cの幅は、ローカリゼーションごとに異なる可能性があるため、その幅を明示的に設定することはできません。ブラウザウィンドウを絞り込むと、div Cを次の行に折り返すことができます。これは悪く見えます。
DIV AとDIV Bをそれぞれオーバーフロー省略記号で左と右に浮動させる方法はありますか？それと同時に、DIV Cは最適な幅に適応できますか？あなたがここで行うに必要なもの
を参照してくださいBの1と重複するようになります
white-space: nowrap;を追加することができ、「センターは」次へ押し下げられ、ブラウザウィンドウが狭い場合は、 –実際、これは非常に真実です。そのため、コンテナーや.DivCに最小幅を使用することをお勧めします。 いつでも浮動小数点数を使用すると、ある時点で固定幅を使用しない限り、常にレイアウトを破るポイントにブラウザのサイズを変更することができます。 – Phunky