Hướng dẫn css truncate string with dots - css cắt chuỗi có dấu chấm

Question

Nội dung chính Show

Vấn đề:
không gian trắng:
Có một số giá trị khác nhau mà bạn có thể sử dụng như:
Text-Overflow:
Giải pháp số 1: Văn bản cắt ngắn cho dòng đơn
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.
Dưới đây là một ví dụ nhanh:
Làm thế nào để bạn cắt một chuỗi trong CSS?
Làm thế nào để bạn sử dụng ellipsis CSS?
Làm cách nào để ẩn văn bản
Tại sao Ellipsis không hoạt động 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.

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:

https://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:

http://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!

Hướng dẫn css truncate string with dots - css cắt chuỗi có dấu chấm

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:

Làm thế nào để bạn cắt một chuỗi trong CSS?

Giải pháp số 1: Văn bản cắt ngắn cho một dòng Giải pháp này hoạt động để cắt 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; 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 đó.white-space: nowrap; Now, our text should be on the same line and should overflow from the box if it's long enough and wrapped before.

Làm thế nào để bạn sử dụng ellipsis CSS?

Ellipsis được hiển thị bên trong khu vực nội dung, giảm lượng văn bản được hiển thị.Nếu không có đủ không gian để hiển thị dấu chấm lửng, nó sẽ được cắt.Được sử dụng để đại diện cho văn bản cắt.Chuỗi được hiển thị bên trong khu vực nội dung, rút ngắn kích thước của văn bản được hiển thị., decreasing the amount of text displayed. If there is not enough space to display the ellipsis, it is clipped. The to be used to represent clipped text. The string is displayed inside the content area, shortening the size of the displayed text.

Làm cách nào để ẩn văn bản

Một thuộc tính dòng văn bản trong CSS được sử dụng để chỉ định rằng một số văn bản đã tràn và ẩn khỏi chế độ xem.Thuộc tính không gian trắng phải được đặt thành NowRap và thuộc tính Overflow phải được đặt thành ẩn.Nội dung tràn có thể được cắt, hiển thị dấu chấm lửng ('' '') hoặc hiển thị một chuỗi tùy chỉnh.The white-space property must be set to nowrap and the overflow property must be set to hidden. The overflowing content can be clipped, display an ellipsis ('…'), or display a custom string.

Tại sao Ellipsis không hoạt động CSS?

Vì vậy, nếu bạn đã đến câu hỏi này bởi vì bạn gặp khó khăn trong việc tạo ra Ellipsis hoạt động bên trong màn hình: Hãy thử thêm Min-Width: 0 vào thùng chứa xa nhất đang tràn ra cha mẹ của nó, ngay cả khi trước đây bạn đã đặt Overflow:ẩn với nó, và xem nó hoạt động như thế nào cho bạn.Try adding min-width: 0 to the outmost container that's overflowing its parent, even if you've previously set overflow: hidden to it, and see how it works for you.

programming css CSS text-overflow Text-overflow: ellipsis Text-overflow: ellipsis flex Text ellipsis

Hướng dẫn css truncate string with dots - css cắt chuỗi có dấu chấm

Vấn đề:

không gian trắng:

Có một số giá trị khác nhau mà bạn có thể sử dụng như:

Text-Overflow:

Giải pháp số 1: Văn bản cắt ngắn cho dòng đơn

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.

Dưới đây là một ví dụ nhanh:

Làm thế nào để bạn cắt một chuỗi trong CSS?

Làm thế nào để bạn sử dụng ellipsis CSS?

Làm cách nào để ẩn văn bản

Tại sao Ellipsis không hoạt động CSS?

Bài Viết Liên Quan

Quảng Cáo

Có thể bạn quan tâm

Toplist được quan tâm

Quảng cáo

Xem Nhiều

Quảng cáo

Chúng tôi

Điều khoản

Trợ giúp

Mạng xã hội