Hướng dẫn how do you use ellipses in css? - làm thế nào để bạn sử dụng dấu chấm lửng trong css?

vào ngày 18 tháng 2 năm 2011 (được cập nhật vào ngày 30 tháng 9 năm 2022)

Tất cả những điều sau đây được yêu cầu, do đó, văn bản phải nằm trong một đường thẳng duy nhất tràn ra một hộp trong đó tràn đó được ẩn.

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

Lưu ý chiều rộng cố định được sử dụng ở đây. Ý chính là phần tử cần một số loại chiều rộng xác định, mà bạn phải đặc biệt cẩn thận với Flexbox:

Tìm kiếm cắt ngắn đến một số dòng cụ thể? Bạn cũng có thể đào hiệu ứng cắt ngắn gọn gàng này.

Trang chủ / Sử dụng Ellipsis với HTML và CSSUsing ellipsis with HTML and CSS

Nếu văn bản quá rộng để phù hợp với container, một giải pháp tốt đẹp có thể là Ellipsis để hiển thị có nhiều thông tin có sẵn. Mặc dù hiện không phải là một phần của thông số kỹ thuật HTML chính thức, nhưng có thể có dấu chấm lửng được xác định trong CSS và nó hoạt động cho Internet Explorer, Safari, Chrome và Opera. Nó không hoạt động cho Firefox nhưng có một cách giải quyết có thể được thực hiện với jQuery.

Thí dụ

Trong ví dụ sau đây, văn bản "Lorem Ipsum Dolor SIT AMET, lãnh đạo quảng cáo elit. Curabitur lobortis interdum INTREDIET. Cras dictum sapien id door convallis ut fringilla ipsum tincidunt." là quá lớn để phù hợp với container nên nó bị cắt cụt và kết thúc bằng một dấu chấm lửng. Lưu ý rằng tôi đã thêm một đường viền màu xám xung quanh văn bản để minh họa nơi ranh giới của khu vực được hiển thị của đoạn văn.

Ví dụ đầu tiên cho thấy văn bản không phù hợp với container và không có kiểu dáng Ellipsis.

Lorem Ipsum Dolor SIT AMET, Lãnh đạo adipiscing elit. Curabitur Lobortis Interdum INTREDIET. Cras dictum sapien id door convallis ut fringilla ipsum tincidunt.

Ví dụ thứ hai cho thấy nó với Ellipsis. Nếu bạn đang xem điều này trong Firefox, nó sẽ không hoạt động nếu bạn không bật JavaScript.

Lorem Ipsum Dolor SIT AMET, Lãnh đạo adipiscing elit. Curabitur Lobortis Interdum INTREDIET. Cras dictum sapien id door convallis ut fringilla ipsum tincidunt.

Ví dụ thứ hai cho thấy nó với Ellipsis. Nếu bạn đang xem điều này trong Firefox, nó sẽ không hoạt động nếu bạn không bật JavaScript.

CSS để thêm dấu chấm lửng

CSS sau là cần thiết để thêm dấu chấm lửng nếu văn bản tràn vào container:

overflow: hidden;
text-overflow: ellipsis;
-o-text-overflow: ellipsis;
white-space: nowrap;
width: 100%;

Động cơ tràn tràn được yêu cầu và cần được đặt thành bất cứ điều gì khác ngoài hiển thị mặc định.overflow propery is required and needs to be set to anything other than the default visible.

không gian trắng: NowRap cũng được yêu cầu; Nếu văn bản có thể bọc, ngay cả khi nó không hiển thị, nó sẽ không thêm dấu chấm lửng vì văn bản không rộng hơn container (nó kết thúc!) is also required; if the text can wrap, even if it is not visible, it will not add the ellipsis because the text is not wider than the container (it wraps!)

Thuộc tính chiều rộng chỉ cần thiết nếu hỗ trợ Internet Explorer 6, mặc dù trong nhiều trường hợp, bạn sẽ muốn có chiều rộng được thiết lập. Nếu container dự kiến ​​sẽ lấp đầy toàn bộ chiều rộng của thùng chứa cha thì đảm bảo bạn có chiều rộng: 100% (hoặc tương tự) để xử lý IE6.width property is only needed if supporting Internet Explorer 6, although in many cases you’ll want to have a set width anyway. If the container is expected to fill the entire width of the parent container then ensure you have width:100% (or similar) for dealing with IE6.

Text-Overflow: Ellipsis là những gì phép thuật. Nó hiện không phải là một phần của đặc điểm kỹ thuật HTML và được giới thiệu trong Internet Explorer. Nó hoạt động trong IE từ ít nhất là phiên bản 6, Safari từ ít nhất là phiên bản 3.2 và Google Chrome. is what does the magic. It’s not currently part of the HTML specification and was introduced in Internet Explorer. It works in IE from at least version 6, Safari from at least version 3.2 and Google Chrome.

-o-text-overflow: Ellipsis là cách làm cho nó hoạt động trong opera. Điều này hoạt động từ ít nhất là Opera 9.0. is how to make it work in Opera. This works from at least Opera 9.0.

Sử dụng jQuery cho firefox

Như đã đề cập khi bắt đầu bài đăng này, Firefox hoàn toàn không hỗ trợ tài sản văn bản. Tuy nhiên, nó có thể làm việc xung quanh điều này với JavaScript thay thế và tôi trình bày ở đây một phương pháp bằng cách sử dụng jQuery. Bài đăng này sử dụng phương thức jQuery cũng như phương thức CSS vì vậy ví dụ trên sẽ hoạt động nếu bạn đang xem trang này trong Firefox.

Tải xuống plugin JQuery Ellipsis của Devon Govett. Đây là một plugin khá thông minh và sẽ chỉ thực hiện chuyển đổi nếu trình duyệt không hỗ trợ các thuộc tính văn bản-overflow hoặc -o-text-overflow.

Bây giờ, nó chỉ đơn giản là vấn đề gán lớp "dấu chấm lửng" (hoặc một số tên lớp khác hoặc #Lement của bạn chọn) cho các yếu tố nên có dấu chấm lửng như vậy:

$(document).ready(function() {
    $('.ellipsis').ellipsis();
}