8

次の HTML があるとします。

<p>
  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
</p>

そして、次の CSS:

p {
  border: 1px solid red;
  width: 200px;
  text-align: right;
  white-space: nowrap; 
}

予想されるレンダリングはどうなるでしょうか? テキストがパラグラフの右側に突き当たり、左側にあふれ出すことを期待していました。Fx/Safari/Opera で観察された結果は、テキストが左側に突き当たり、右側にオーバーフローします。text-align:center; でも同じ問題が見られます。テキストが両側に均等にオーバーフローすることを期待しています。

CSS2.1 と CSS3 Text は、レンダリングを指定していないようです。

テスト リンク: http://www.webdevout.net/test?0e&raw

4

4 に答える 4

16

方向プロパティを使用した後の結果を得ることができました。

p { 
    direction: rtl; 
    border: 1px solid red; 
    width: 200px; 
    text-align: right; 
    white-space: nowrap;
}

これは、Firefox、Safari、および IE の現在のバージョンで機能しました。

于 2010-09-21T10:34:36.770 に答える
9

CSS 2.1 仕様の「Inline Formatting Context 」セクションには、次のように記載されています。

行のインライン ボックスの幅の合計が、それらを含む行ボックスの幅よりも小さい場合、行ボックス内の水平方向の配置は、'text-align' プロパティによって決定されます。そのプロパティの値が 'justify' の場合、ユーザー エージェントは、インライン ボックス (インライン テーブルとインライン ブロック ボックスを除く) 内のスペースと単語を引き伸ばすこともできます。

インライン ボックスがライン ボックスの幅を超える場合、インライン ボックスは複数のボックスに分割され、これらのボックスは複数のライン ボックスに分散されます。インライン ボックスを分割できない場合 (たとえば、インライン ボックスに単一の文字が含まれている場合、または言語固有の単語分割規則でインライン ボックス内の分割が許可されていない場合、またはインライン ボックスが nowrap または pre の空白値の影響を受ける場合) )、インライン ボックスがライン ボックスをオーバーフローします。

したがって、このtext-alignプロパティは、ライン ボックスの長さがブロックの幅よりも小さい場合にのみ使用されます。ライン ボックスがそれを含む要素よりも広い場合、text-alignプロパティは考慮されません。

于 2010-09-21T10:33:47.787 に答える
4

次のように、サイズを制限する外側のエンベロープ コンテナーと、コンテンツを右にフロート表示する内側の要素を作成できます。

HTML:

<div>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore.</p>
</div>

CSS:

DIV {
    width: 200px;    
    overflow: hidden;
    border: 1px solid red;
}
P {
    float: right;
    white-space: nowrap;
}

オリー・ホジソンのアイデアに反応して：

direction: rtl;

文末（右から）から最初の文字（左へ）として句読点を投げています（Google Chrome v. 38）

于 2014-09-10T11:08:22.133 に答える
0

ああ、私は前にこれに遭遇しました。align:right はボックス内のコンテンツにのみ影響し、オーバーフローは常に左揃えになります。「方向」でテキストの方向を反転するだけで、それを変更できます。

于 2010-09-21T10:37:03.463 に答える