cắt văn bản quá dài bên trong div

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

very long text
</div>

bất kỳ cách nào để sử dụng css thuần túy để cắt văn bản quá dài thay vì hiển thị trên dòng mới tiếp theo và chỉ hiển thị tối đa 100px

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

Đây là một cách tiếp cận khả thi mà tôi có thể nghĩ ra

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

Bằng cách này, văn bản dài sẽ vẫn bao bọc nhưng sẽ không hiển thị do overflowđã đặt và bằng cách đặt line-heightgiống như heightchúng tôi đảm bảo rằng chỉ một dòng sẽ được hiển thị.

Xem demo ở đây và mô tả thuộc tính tràn tuyệt đẹp với các ví dụ tương tác.

Bạn có thể dùng:

overflow:hidden;

để ẩn văn bản bên ngoài vùng.

Lưu ý rằng nó có thể cắt chữ cái cuối cùng (vì vậy một phần của chữ cái cuối cùng vẫn sẽ được hiển thị). Một cách đẹp hơn là hiển thị dấu chấm lửng ở cuối. Bạn có thể làm điều đó bằng cách sử dụng 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/

Tại sao không sử dụng đơn vị tương đối?

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

Mã bên dưới sẽ ẩn văn bản của bạn với chiều rộng cố định do bạn quyết định. nhưng không hoàn toàn phù hợp với các thiết kế đáp ứng.

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

Cập nhật

Tôi đã nhận thấy trong (các) thiết bị di động rằng văn bản (trộn lẫn) với nhau do (chiều rộng cố định) ... vì vậy tôi đã chỉnh sửa mã ở trên để trở thành ẩn một cách phản hồi như sau:

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

(Chiều rộng tối đa) đảm bảo văn bản sẽ được ẩn một cách thích ứng bất kể (kích thước màn hình) và sẽ không bị trộn lẫn với nhau.