テキストオーバーフロー：省略記号が機能しない

これは私が試したものです（ここを参照してください）：

body {
    overflow: hidden;
}

span {
    border: solid 2px blue;
    white-space: nowrap;
    text-overflow: ellipsis;
}

基本的に、ウィンドウを小さくすると、省略記号でスパンが縮小するようにします。何を間違えたのですか？

あなたは、CSSを持っている必要がありoverflow、width（またはmax-width）、displayとwhite-space。

http://jsfiddle.net/HerrSerker/kaJ3L/1/

span {
    border: solid 2px blue;
    white-space: nowrap;
    text-overflow: ellipsis;
    width: 100px;
    display: block;
    overflow: hidden
}

補遺 ラインクランプ（マルチラインオーバーフロー楕円）を行う手法の概要が必要な場合は、次のCSS-Tricksページを参照してください。https：//css-tricks.com/line-clampin/

補遺2（2019年5月）
このリンクが主張するように、Firefox 68はサポートします-webkit-line-clamp（！）

ブロック要素と最大サイズがあることを確認し、オーバーフローを非表示に設定します。（IE9およびFF 7でテスト済み）

http://jsfiddle.net/uh9zD/

div {
    border: solid 2px blue;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 50px;
}

Chromeで複数行を使用する場合：

display: inline-block;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2; // max nb lines to show
-webkit-box-orient: vertical;

YouTubeからインスピレーションを受けた;-)

Chromeでの省略記号に問題がありました。ホワイトスペースをオンにする：nowrapで修正されたようです。

max-width: 95px;
max-height: 20px;
overflow: hidden;
display: inline-block;
text-overflow: ellipsis;
border: solid 1px black;
font-size: 12pt;
text-align: right;
white-space: nowrap;

word-wrap: break-word;

これとこれだけが私のための仕事をしました

<pre> </pre> 

鬼ごっこ

他のすべては省略をしませんでした...

これに出くわす可能性のある人にとってはただの賛成です...私のh2は継承していました

text-rendering: optimizelegibility; 
//Changed to text-rendering: none; for fix

これは省略を許していませんでした。どうやらこれは非常にフィニッキーです。

以下に、好きな場所のコードを追加してください

例

p{
   display: block; /* Fallback for non-webkit */
   display: -webkit-box;
   max-width: 400px;
   margin: 0 auto;
   -webkit-line-clamp: 2;
   -webkit-box-orient: vertical;
   overflow: hidden;
   text-overflow: ellipsis;
 }

複数回線の場合

クロムでは、複数行に省略記号を適用する必要がある場合は、このCSSを適用できます。

CSSに幅を追加して、特定の幅の要素を指定することもできます。

.multi-line-ellipsis {
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}

<p class="multi-line-ellipsis">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>

CSSに以下を追加して、省略記号を使用してみてください。

.truncate {
  width: 250px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

しかし、このコードは1行のトリムにのみ適用されるようです。テキストをトリミングして省略記号を表示するその他の方法は、次のWebサイトにあります。http：//blog.sanuker.com/？p = 631

省略記号が機能するようにCSSに次の行を追加します

 p {
     display: block; // change it as per your requirement
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
   }

その私たちのそれらのために一定の幅を使用したくない、それはまた、使用して動作しますdisplay: inline-grid。したがって、必要なプロパティとともに、追加するだけですdisplay

span {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    display: inline-grid;
}