43

親のdivと隣接するdivに十分なスペースがない場合に、フローティングdivのテキストに省略記号を付ける方法があるかどうか疑問に思います。例えば：

<style>
.parent-div {
    width: 100%;
    border: 1px;
    padding: 4px;
}
.text-div {
    float: right;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;    
}
.icon-div {
    float: left;
}
</style>
<div class="parent-div">
  <div class="text-div">This is text I'd like to truncate when space doesn't permit</div>
  <div class="icon-div">X</div>
</div>

これまでのところ、ブラウザウィンドウをクランチすると、親divが折りたたまれ、text-divの空白が消えますが、余地がなくなると省略記号が表示されなくなります。

私が考えることができる唯一のことは、ウィンドウのサイズが変更されたときにイベントをトリガーし、text-divに新しい固定幅を動的に設定することですが、これは、特にパディングや他の隣接するアーティファクトを取得するために差し引く必要があることを考えると、エレガントではないと感じます適切な幅。

これについて何か考えはありますか？

これがjsFiddleのデモです：http：//jsfiddle.net/Blender/kXMz7/

4

2 に答える 2

72

CSS3の柔軟なボックスレイアウトを使用して、これを非常に直感的に行うことができます。

.parent-div {
    display: flex;
}

.text-div {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;    

    min-width: 0;
}

.icon-div {
    flex: 1;
}​

デモ： http： //jsfiddle.net/Blender/kXMz7/1/

于 2012-09-29T21:37:49.373 に答える
12

私の会社はまだCSS3をサポートしていませんが、別の解決策で問題を解決することができました。floatアイコンdivにのみ属性を適用し、それをHTMLの最初に配置することにより、他のdivは垂直方向に整列されたままになり、十分なスペースがない場合は切り捨てられます。

例:(右側のアイコン）http://jsfiddle.net/qftWN/、（左側のアイコン）http://jsfiddle.net/Nr2NN/

于 2013-06-20T00:51:04.363 に答える