0

私のコードに従ってください：

HTML:

<div>aaaaaaaaaaaaaaa
    <span>test</span>
</div>

CSS:

div{
    width: 60px;
    border-bottom: 1px solid red;
    word-break:break-all;
}
span{
    float: right
}

私はこの結果を取得します: http://oi41.tinypic.com/2py25w1.jpg
右側にフローティングされたテキストが div から出る必要がないようにしたいので、必要に応じて div 内の新しい行に移動する必要があります。私が投稿したコードのように。この場合、たとえば、テキストはテキストの右側に収まるため、新しい行のテキストを手放す必要はありません: http://jsfiddle.net/3kRan/2/

4

2 に答える 2

0

次のように、div のオーバーフローを非表示に設定します。

div{
    width: 60px;
    border-bottom: 1px solid red;
    word-break:break-all;
    overflow: hidden;

}

スパンが浮き上がろうとすると、コンテンツがオーバーフローします。これにより、スパンを親コンテナー内にとどめることができます。

于 2013-09-30T16:43:55.170 に答える
0

この答えは、テキストを などの要素でラップする能力に依存しますp。最終的な結果は次のようになります。

<div><p>aaaaaaaaaa</p>
  <span>test</span>
</div>

div{
  width: 60px;
  border-bottom: 1px solid red;
  word-break:break-all;
  height: 100%; 
  overflow: auto; /* fix to clear the parent */
}
p {
  padding:0;
  margin:0;
}
span{
  float: right
}

更新されたフィドル: http://jsfiddle.net/3kRan/5/

于 2013-09-30T16:48:58.180 に答える