web-dev-qa-db-ja.com

可変幅divを使用する場合のCSSテキストの省略記号

親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/

csshtmlcss-floatellipsis
36
Anthony

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/

67
Blender

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

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

12
Chase Sandmann