web-dev-qa-db-ja.com

div内で長すぎるテキストをトリミングします

<div style="display:inline-block;width:100px;">

very long text
</div>

純粋なcssを使用して、次の新しい行に表示するのではなく、長すぎるテキストを切り取り、最大100pxのみを表示する方法

htmlcss3css
73
cometta

次を使用できます。

overflow:hidden;

ゾーンの外側のテキストを非表示にします。

最後の文字が切り取られる場合があることに注意してください（したがって、最後の文字の一部が表示されたままになります）。より良い方法は、最後に省略記号を表示することです。 text-overflow を使用して実行できます。

overflow: hidden;
white-space: nowrap; /* Don't forget this one */
text-overflow: Ellipsis;
142
Arseni Mourzenko
.crop { 
  overflow:hidden; 
  white-space:nowrap; 
  text-overflow:Ellipsis; 
  width:100px; 
}​

http://jsfiddle.net/hT3YA/

26
s1ntez

相対単位を使用しないのはなぜですか？

.cropText {
    max-width: 20em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: Ellipsis;
}
6
Tomas Macek

以下のコードは、決定した固定幅でテキストを非表示にします。しかし、レスポンシブデザインにはあまり適していません。

.CropLongTexts {
  width: 170px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: Ellipsis;
}

更新

（モバイル）デバイスで、テキストが（固定幅）のために互いに混ざり合っていることに気づきました...したがって、上記のコードを編集して、次のようにレスポンシブに非表示になりました：

.CropLongTexts {
  max-width: 170px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: Ellipsis;
}

（最大幅）は、（画面サイズ）に関係なく、テキストがレスポンシブに非表示になり、互いに混ざらないようにします。

4
Al3abMizo Games