web-dev-qa-db-ja.com

CSSテキストオーバーフロー：省略記号。働いていませんか？

この単純なCSSが機能しない理由がわかりません...

.app a {
  height: 18px;
  width: 140px;
  padding: 0;
  overflow: hidden;
  position: relative;
  margin: 0 5px 0 5px;
  text-align: center;
  text-decoration: none;
  text-overflow: Ellipsis;
  white-space: nowrap;
  color: #000;
}
<div class="app">
  <a href="">Test Test Test Test Test Test</a>
</div>

4回目の "テスト"の前後でカットオフする必要があります

cssoverflowellipsiscss3
297
ChristopherStrydom

text-overflow:Ellipsis;は、次の条件が満たされている場合にのみ機能します。

  • 要素の幅はpx（pixels）に制限されなければなりません。 %の幅（パーセント）は機能しません。
  • この要素にはoverflow:hiddenとwhite-space:nowrapが設定されている必要があります。

ここで問題を抱えているのは、あなたのwidth要素のaが制約されていないからです。 width設定がありますが、要素はdisplay:inline（つまりデフォルト）に設定されているのでそれを無視していて、幅を制限するものは他に何もありません。

次のいずれかを実行してこれを修正できます。

  • 要素をdisplay:inline-blockまたはdisplay:blockに設定します（おそらく前者ですが、レイアウトのニーズによって異なります）。
  • そのコンテナ要素の1つをdisplay:blockに設定し、その要素に固定のwidthまたはmax-widthを指定します。
  • 要素をfloat:leftまたはfloat:rightに設定します（おそらく前者ですが、やはり省略記号に関しては同じ効果があるはずです）。

display:inline-blockをお勧めします。レイアウトへの影響が最小限で済むからです。レイアウトに関しては、現在使用しているdisplay:inlineと非常によく似た動作をしますが、他の点についても自由に試してください。これらのことがどのように相互に作用するのかを理解しやすくするために、できるだけ多くの情報を提供するようにしました。 CSSの理解の大部分は、さまざまなスタイルがどのように連携して機能するかを理解することです。

それが役立つことを願っています。

ここにあなたのコードと、display:inline-blockを追加したスニペットがあります。

.app a {
  height: 18px;
  width: 140px;
  padding: 0;
  overflow: hidden;
  position: relative;
  display: inline-block;
  margin: 0 5px 0 5px;
  text-align: center;
  text-decoration: none;
  text-overflow: Ellipsis;
  white-space: nowrap;
  color: #000;
}
<div class="app">
  <a href="">Test Test Test Test Test Test</a>
</div>

役に立つ参考文献

759
Spudley

受け入れられた答えは素晴らしいです。ただし、%の幅を使用してtext-overflow: Ellipsisを取得することはできます。解決策は簡単です。

display: inline-block; /* for em, a, span, etc (inline by default) */
text-overflow: Ellipsis;
width: calc (80%); /* The trick is here! */

calcを使用するときはいつでも、最終的な値は絶対ピクセルでレンダリングされます。これは、結果的に80%を800px widthコンテナーの1000pxのようなものに変換します。したがって、width: [YOUR PERCENT]%を使用する代わりにwidth: calc([YOUR PERCENT]%)を使用してください。

14
Trouble Zero

IE10以下では、Word-wrapが normal に設定されていることも確認してください。

以下で参照される標準は、このプロパティの動作を "text-wrap"プロパティの設定に依存していると定義しています。ただし、Internet Explorerは "text-wrap"プロパティをサポートしていないため、Windows Internet ExplorerではwordWrap設定は常に有効です。

したがって、私の場合、Word-wrapを break-Word （継承または既定では？）に設定したため、text-overflowはFFおよびChromeで機能しますが、IEでは機能しません。

ワードラッププロパティのms情報

7
Tim Vermaelen

anchor、span...タグはデフォルトで インライン要素 です。インライン要素の場合、widthプロパティは機能しません。だからあなたはあなたの要素をinline-blockかblock level要素に変換しなければなりません

5
santhoshkumar

省略符号が機能するための情報の後に書かれた4行を含める

.app a {
        height: 18px;
        width: 140px;
        padding: 0;
        position: relative;
        margin: 0 5px 0 5px;
        font: bold 15px/18px Arial;
        text-align: center;
        text-decoration: none;
        color: #FFF;

        /* 
           **Note:**The Below 4 Lines are necessary 
           for Ellipsis to work
        */
        display: block; // change it as per your requirement
        overflow: hidden;
        text-overflow: Ellipsis;
        white-space: nowrap;

    }
3
Manoj Selvin

1行のCSSを追加するだけです。

.app a {
   display: inline-block;
}
2
Sanjib Debnath

display: block;にdisplay: inline-block;または#User_Apps_Content .DLD_App aを追加してください

デモ

2
Bhojendra Rauniyar

それで、display: flexコンテナの中で省略符号をうまく動かそうとしていないためにこの問題に遭遇した場合は、min-width: 0をすでに設定していても、親をオーバーフローさせる一番外側のコンテナにoverflow: hiddenを追加してみてください。 。

aj-foster による codepen の詳細と動作例。私の場合は完全にトリックでした。

1
Herick

Float：leftを追加することもできます。このクラスの内部#User_Apps_Content .DLD_App a

0
Shabbir Lakdawala

応答しながら長い説明を楕円形にする（1レーンのみ）必要があったので、私の解決策は（white-space: nowrapではなく）テキストをラップさせ、固定幅ではなく固定高さを追加することでした：

span {
  display: inline-block;
  line-height: 1rem;
  height: 1rem;
  overflow: hidden;
  // OPTIONAL LINES
  width: 75%;
  background: green;
  //  white-space: normal; default
}
<span>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi quia quod reprehenderit saepe sit. Animi deleniti distinctio dolorum iste molestias reiciendis saepe. Ea eius ex, ipsam iusto laudantium natus obcaecati quas rem repellat temporibus! A alias at, atque deserunt dignissimos dolor earum, eligendi eveniet exercitationem natus non, odit sint sit tempore voluptate. Commodi culpa ex facere id minima nihil nulla omnis praesentium quasi quia quibusdam recusandae repellat sequi ullam, voluptates. Aliquam commodi debitis delectus magnam nulla, omnis sequi sint unde voluptas voluptatum. Adipisci aliquam deserunt dolor enim facilis libero, maxime molestias, nemo neque non nostrum placeat reprehenderit, rerum ullam vel? A atque autem consectetur cum, doloremque doloribus fugiat hic id iste nemo nesciunt officia quaerat quibusdam quidem quisquam similique sit tempora vel. Accusamus aspernatur at au
</span>
0
T04435

bootstrap 4では、.text-truncateクラスを追加して省略記号でテキストを切り捨てることができます。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>

<!-- Inline level -->
<span class="d-inline-block text-truncate" style="max-width: 250px;">
  The quick brown fox jumps over the lazy dog.
</span>
0
Penny Liu

含まれている必要があります

  text-overflow: Ellipsis;
  white-space: nowrap;
  overflow: hidden;

含んではいけません

display: inline

含むべきである

position: sticky
0
Cryptopat