div内で長すぎるテキストを切り抜く

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

very long text
</div>

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

<div class="crop">longlong longlong longlong longlong longlong longlong </div>​

これは私が考えることができる1つの可能なアプローチです

.crop {width:100px;overflow:hidden;height:50px;line-height:50px;}​

このように、長いテキストは折り返されますが、overflow設定のために表示されません。line-height同じようheightに設定することで、1行だけが表示されるようにします。

こちらのデモとインタラクティブな例を含む素晴らしいオーバーフロープロパティの説明を参照してください。

次を使用できます。

overflow:hidden;

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

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

overflow: hidden;
white-space: nowrap; /* Don't forget this one */
text-overflow: ellipsis;

.crop { 
  overflow:hidden; 
  white-space:nowrap; 
  text-overflow:ellipsis; 
  width:100px; 
}​

http://jsfiddle.net/hT3YA/

相対単位を使用してみませんか？

.cropText {
    max-width: 20em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

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

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

更新

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

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

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