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番目の「テスト」の前後でカットオフする必要があります

text-overflow:ellipsis; 以下が真の場合にのみ機能します。

• 要素の幅はpx（ピクセル）で制限する必要があります。幅%（パーセント）は機能しません。
• 要素は持っている必要があります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>

役立つリファレンス：

• https://developer.mozilla.org/en-US/docs/Web/CSS/text-overflow
• https://developer.mozilla.org/en-US/docs/Web/CSS/white-space

受け入れられた答えは素晴らしいです。ただし、%幅を使用して到達することはできます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、最終的な値は絶対ピクセルでレンダリングされ、その結果、-widthコンテナーの80%ようなものに変換されます。したがって、を使用する代わりに、を使用します。800px1000pxwidth: [YOUR PERCENT]%width: calc([YOUR PERCENT]%)

したがって、display: flexコンテナ内で省略記号を機能させるのに問題があるためにこの質問に到達した場合は、min-width: 0すでにa overflow: hiddenを設定していても、親をオーバーフローしている最も外側のコンテナに追加して、それがどのように機能するかを確認してください。

詳細とaj- fosterによるこのcodepenの実際の例。私の場合は完全にトリックを行いました。

また、IE10以下の場合、通常にword-wrap設定されていることを確認してください。

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

したがって、私の場合、ブレークワード（継承されたものか、デフォルトで設定されたものか）word-wrapに設定されていたためtext-overflow、FFとChromeでは機能しましたが、IEでは機能しませんでした。

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

anchor、span...タグはインライン要素インライン要素の場合には、デフォルトでwidthプロパティが動作しません。したがって、要素をinline-blockまたはblock level要素に変換する必要があります

省略記号が機能するように、情報の後に書かれた4行を含めます

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

 /* 
 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;
}

display: block;またはdisplay: inline-block;に追加#User_Apps_Content .DLD_App a

デモ

あなたは1行のCSSを追加するだけです：

.app a {
   display: inline-block;
}

では、ブートストラップ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>

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

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

含まないでください

display: inline

含むべき

position: sticky

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

応答しながら長い説明を楕円形にする（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>

これは、次のことを許可するコードです。

overflow: hidden;
text-overflow: ellipsis;

オーバーフロー：非表示が必要です

私は同じ問題に直面しました、そして、上記の解決策のどれもSafariのために機能しないようです。Safari以外のブラウザの場合、これは問題なく機能します。

display: block; /* or in-line block according to your requirement */
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;

Safariの場合、これは私にとって有効なものです。ブラウザがSafariかどうかを確認するためのメディアクエリは時間とともに変化する可能性があるので、うまくいかない場合はメディアクエリをいじってください。line-clamp財産、それはまた、省略記号とウェブで複数の行を持つことが可能であろう、参照ここ。

// Media-query for Safari-only browser.
@media not all and (min-resolution: 0.001dpcm) {
  @media {
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    display: -webkit-box;
    white-space: normal;
  }
}

https://stackoverflow.com/a/53784508/5626747

評判のためコメントできないので、別の回答をします。

この場合display: block;、text-overflow: ellipsis;オンに設定した要素から一般的に提案されたプロパティを削除する必要があります。そうしないと、最後に...なしで切り捨てられます。

これらをCSSルールに記述します。

display: block; /* or in-line block according to your requirement */
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;