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.
Tôi cho rằng bạn chỉ muốn các chấm xuất hiện màu đỏ? Thật không may, điều này không thể với CSS đơn giản. Tuy nhiên, tôi đã tìm thấy một hướng dẫn quản lý để tạo ra một kiểu Ellipsis tùy chỉnh, điều đó sẽ chỉ được hiển thị khi cần thiết:
//www.mobify.com/dev/multiline-ellipsis-in-pure-css/
Đó là một bản hack khá tốt và không dễ giải thích bằng lời. Có lẽ jsfiddle này tôi vừa làm có thể giúp bạn:
//jsfiddle.net/MyUQJ/9/
Xóa overflow: hidden;
trên .wrap
để xem những gì đang xảy ra. Ý tưởng chính là .end
Div di chuyển sang đáy bên trái trong .left-side
khi văn bản đang tràn, trong khi khi nó không tràn ra ở dưới cùng bên phải của .text
. Sau đó, div .ellipsis
được định vị tuyệt đối bên trong tương đối .end
, vì vậy bạn khi bạn định vị nó ở bên phải nó có thể nhìn thấy khi văn bản đang tràn và nó tràn ra khi văn bản không tràn! Hài hước, phải không?
Dù sao, đây là mã thô:
HTML:
This is a short story, it
doesn't need to be ellipsed.
end
...
This is a long story. You won't be able to
read the end of this story because it will
be to long for the box I'm in. The story is
not too interesting though so it's good you
don't waste your time on this.
end
...
CSS:
.wrap {
height: 100px;
width: 234px;
border: solid 1px #000;
overflow: hidden;
}
.left-side {
float: left;
width: 32px;
height: 100px;
background: #F00;
}
.text {
float: right;
border: solid 1px #0F0;
width: 200px;
}
.end {
position: relative;
float: right;
width: 30px;
border: solid 1px #00F;
}
.ellipsis {
position: absolute;
top: -25px;
left: 198px;
background: white;
font-weight: bold;
color: #F0F;
}
Tất nhiên, khi bạn sẽ thực hiện điều này, bạn muốn xóa tất cả các biên giới và văn bản 'kết thúc'. Tôi đã làm điều này để trở thành một ví dụ dễ hiểu. Ngoài ra, bạn có thể muốn cung cấp cho bọc
This is a short story, it
doesn't need to be ellipsed.
end
...
This is a long story. You won't be able to
read the end of this story because it will
be to long for the box I'm in. The story is
not too interesting though so it's good you
don't waste your time on this.
end
...
0 và sau đó cho nó
This is a short story, it
doesn't need to be ellipsed.
end
...
This is a long story. You won't be able to
read the end of this story because it will
be to long for the box I'm in. The story is
not too interesting though so it's good you
don't waste your time on this.
end
...
1, trong đó chiều rộng là chiều rộng cho .left-side
, vì vậy văn bản của bạn sẽ không có biên độ ở phía bên trái.Chúc may mắn!
Shan Shah
Đăng vào ngày 6 tháng 5 năm 2020 • Cập nhật vào ngày 10 tháng 8 năm 2021
Vấn đề:
Có rất nhiều phương pháp trong mỗi ngôn ngữ để cắt ngắn văn bản. Nhưng, gần đây, tôi đã phải đối mặt với một thử thách ở phía trước trong CSS, nơi tôi cần cắt ngắn văn bản cho nhiều dòng. Có một số tình huống mà tôi không được phép sử dụng hàm JS. Vì vậy, tôi đã phải sửa nó thông qua CSS.
Lưu ý nhanh: Nếu bạn là người mới ở đây: Kênh YouTube của chúng tôi có thể giúp bạn học phát triển web hiện đại bằng cách xây dựng các dự án thế giới thực nhanh chóng và dễ dàng: Coder Champ - Đăng ký ngay bây giờ If you are new here: Our YouTube channel can help you to learn modern Web Development by building Real World projects fast & easy way:
Coder Champ - Subscribe Now
Trước khi lặn vào giải pháp chính xác, tôi muốn bạn hiểu các thuộc tính dưới đây. Tôi đã làm cho họ dễ dàng cho bạn, vì vậy bạn có thể nhanh chóng lấy các khái niệm.
không gian trắng:
Hãy coi thuộc tính này là người xử lý văn bản hộp. Nói một cách đơn giản, khi bạn đặt văn bản vào bất kỳ yếu tố nào, việc điều chỉnh văn bản trong không gian cụ thể đó phụ thuộc vào chiều rộng của nó. Nếu chiều rộng của hộp là 40px và bạn đã thêm văn bản vào đó. Các văn bản sẽ kết thúc nó, theo không gian trắng có sẵn.
Theo mặc định, không gian trắng của hộp được đặt thành bình thường. Vì vậy, mỗi văn bản sẽ đạt giới hạn 400px sẽ tự động kết thúc và chuyển sang dòng tiếp theo.
Có một số giá trị khác nhau mà bạn có thể sử dụng như:
không gian trắng: Pre; không gian trắng: bao bọc trước; không gian trắng: tiền tuyến; không gian trắng: không gian nghỉ; không gian trắng: Nowrap;
white-space: pre-wrap;
white-space:
pre-line;
white-space: break-spaces;
white-space: nowrap;
Text-Overflow:
Bạn muốn làm gì với văn bản ẩn?
Giá trị làm việc cho tôi khi tôi muốn hiển thị ba dấu chấm ở cuối văn bản bị cắt ngắn của tôi là dấu chấm lửng.
Text-Overflow: Ellipsis;
Lưu ý, thuộc tính này sẽ không hoạt động trừ khi hộp của bạn nơi bạn đặt văn bản không có không gian trắng và tràn: ẩn; đặc tính.
Giải pháp số 1: Văn bản cắt ngắn cho dòng đơn
Đôi khi, chúng tôi muốn văn bản của chúng tôi ở trên một đường thẳng. Chúng ta có thể đạt được nó bằng cách đặt một thuộc tính không gian trắng thành giá trị NowRap.
Giải pháp này hoạt động cho việc cắt ngắn một dòng.
Văn bản lực lượng trên một dòng duy nhất: không gian trắng: NowRap;
white-space: nowrap;
Bây giờ, văn bản của chúng tôi phải ở trên cùng một dòng và sẽ tràn ra khỏi hộp nếu nó đủ dài và được bọc trước đó.
Đây là điều tiếp theo chúng ta cần giải quyết. Chúng ta cần ẩn văn bản chảy quá mức và sau đó thêm dấu chấm lửng [ba chấm ở cuối].
Tôi sẽ sử dụng các thuộc tính sau hoàn toàn: không gian trắng: NowRap; tràn: ẩn; Text-Overflow: Ellipsis;
white-space: nowrap;
overflow: hidden;
text-overflow:
ellipsis;
Dưới đây là một ví dụ hoàn chỉnh về giải pháp:
Giải pháp # 2: Văn bản cắt ngắn cho nhiều dòng.
Hãy để nhanh chóng và đi sâu vào giải pháp thứ hai, đó là đa dòng.
Quá trình này rất đơn giản; Tất cả những gì bạn cần là đặt chiều cao trên hộp hoặc phần tử, nhưng đây là phần khó khăn.
Chúng ta sẽ cần đếm số lượng dòng chúng ta mong muốn và sau đó nhân nó với chiều cao dòng để có được chiều cao tối đa.
Có một số tính chất khác, cần thiết cho giải pháp này. Bạn có thể kiểm tra nó vào bút mã.
Độ cao tối đa: calc [độ cao dòng * số dòng bạn mong muốn];
Dưới đây là một ví dụ nhanh:
Bạn có biết về thủ thuật này của nhiều bóng hộp CSS không?
Đã thêm một video mới về 5 mẹo để làm chủ CSS: