divを含むdivでテキストが長すぎる場合

Question

タグシステムを作成したいと思います。 div（タグ）内のテキストが長すぎる場合は、切り捨てて最後に「...」を追加します。それを行うためのCSSソリューションはありますか？

Answer 1

。詳細は、コードのコメントに記載されています。ここで

div { 
 
    width: 10em; /* the element needs a fixed width (in px, em, %, etc) */ 
 
    overflow: hidden; /* make sure it hides the content that overflows */ 
 
    white-space: nowrap; /* don't break the line */ 
 
    text-overflow: ellipsis; /* give the beautiful '...' effect */ 
 
}

<div>This is a text that is too long for this div.</div>

Answer 2

これを試してください：あなたはそのためのtext-overflow: ellipsisを使用することができます

<div class='truncate'></div> 



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

Answer 3

あなたに必要なCSSです。ここで

.tag{ 
 
    display: inline-block; 
 
    overflow: hidden; 
 
    text-overflow: ellipsis; 
 
    white-space: nowrap; 
 
    width: 100px; 
 
}

幅は、必要なサイズに変更することができます。

空白は、テキストが同じ行にあることを確認します。

オーバーフロー：hidden余分なコンテンツを隠すと、テキストオーバーフローによってドットが追加されます。

テキストオーバーフロー：省略記号ドット "をCSSの省略記号" のための