1

ボックス表示を使用していますが、テキストで省略記号を正しくレンダリングできません。現在、テキストは含まれている要素を超えてオーバーフローしています。

HTML：

<div class="outer hbox">
  <div class="hbox left-container">
    <div class="label no-wrap box-centered">Col1</div>
  </div>
  <h1 class="label no-wrap">really long title really long title really long title really long title really long title really long title really long title really long title really long title</h1>
</div>

CSS：

.outer {
  width: 400px;
  border: 1px solid black;
}
.hbox {
  -moz-box-orient: horizontal;
  -webkit-box-orient: horizontal;
  box-orient: horizontal;
  display: -moz-box;
  display: -webkit-box;
  display: box;
}
.left-container {
  border: 1px solid red;
}
.no-wrap {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
h1 {
  border: 1px solid green;
}

ここでの例：http：//jsfiddle.net/bmclachlin/Sq7Xa/

h1をdivでラップしたり、h1をdivに変更したりしようとしましたが、何も機能しないようです。私はおそらく何か明白なものが欠けていることを知っています、何かアイデアはありますか？

注：このコードはqooxdooというJavaScriptライブラリから生成されているため、構造をあまり変更することはできません。h1を別の要素に変更したり、必要に応じてh1をdivでラップしたりできます。

4

1 に答える 1

0

このため、h1タグは1行の非常に長いテキストのように扱われます。no-wrapこれが、テキストとオーバーフローを適用できなかったために、タグが非常に長い場所にかかる理由です。次の例を考えてみましょう。

.no-wrap {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%;
}

http://jsfiddle.net/Sq7Xa/13/

そのため、h1親コンテナの全幅を取得し、オーバーフローが発生することを余儀なくされました

UPD：もう少し近い回避策は、両方の要素に実際の幅を定義することです。コードへの侵入はhttp://jsfiddle.net/Sq7Xa/15/のようになりますが、周囲の境界線のために2pxがまだ不整合であることに注意してください。 theh1

本当にその境界を維持する必要がある場合は、いくつかの回避策があります。

  1. http://caniuse.com/css3-boxsizingbox-sizing: border-box;へのプロパティを使用するものh1 

    h1 {
  box-sizing: border-box;
  border: 1px solid green;
  width: 80%;
}

  2. もう1つは、サンプルコードhttp://jsfiddle.net/Sq7Xa/18/divにもう1つ必要です。h1

しかし、それでも、コードを修正することで、物事をより簡単に行うことができると感じています。特にdisplay: box;、私の時点では少し余分です。

于 2013-01-18T20:00:42.100 に答える