Những bài học
Bắt đầu
Bắt đầu học
CodeGym /Các khóa học /Frontend SELF VI /Xử lý dòng chảy văn bản

Xử lý dòng chảy văn bản

Frontend SELF VI
Mức độ , Bài học
Có sẵn

8.1 Thuộc tính text-overflow

Xử lý dòng chảy văn bản và điều khiển cách hiển thị của nó là những yếu tố quan trọng trong thiết kế web, đặc biệt là khi làm việc với các dòng văn bản dài hoặc các container có kích thước giới hạn. Các thuộc tính text-overflow, white-space và word-wrap (nay được biết đến là overflow-wrap) cho phép điều khiển cách văn bản hành xử trong các tình huống như vậy.

Thuộc tính text-overflow điều khiển cách hiển thị văn bản vượt quá giới hạn của container. Nó được sử dụng cùng với các thuộc tính white-space và overflow để tạo ra hiệu ứng cắt văn bản và thêm dấu ba chấm.

Giá trị:

  • clip: cắt văn bản ở rìa container
  • ellipsis: thêm dấu ba chấm (...) ở cuối văn bản bị cắt

Ví dụ sử dụng:

CSS 
    
      .container {
        width: 200px;
        white-space: nowrap;
        overflow: hidden;
        border: 1px solid #000;
      }

      .clip {
        text-overflow: clip;
      }

      .ellipsis {
        text-overflow: ellipsis;
      }
HTML 
    
      <body>
        <div class="container clip">Văn bản này sẽ bị cắt ở rìa của container.</div>
        <div class="container ellipsis">Văn bản này sẽ bị cắt và thay thế bằng dấu ba chấm.</div>
      </body>

8.2 Thuộc tính white-space

Thuộc tính white-space điều khiển việc xử lý các ký tự khoảng trắng và ngắt dòng văn bản. Nó cho phép đặt cách khoảng trắng, tab và dòng mới được xử lý trong văn bản.

Giá trị:

  • normal: khoảng trắng và ngắt dòng được xử lý bình thường (theo mặc định)
  • nowrap: văn bản được hiển thị trên một dòng, không có ngắt dòng
  • pre: khoảng trắng và ngắt dòng được giữ nguyên, như trong thẻ HTML <pre>
  • pre-wrap: khoảng trắng và ngắt dòng được giữ nguyên, nhưng văn bản có thể ngắt dòng khi cần thiết
  • pre-line: ngắt dòng giữ nguyên, nhưng khoảng trắng được xử lý như bình thường
  • break-spaces: khoảng trắng và ngắt dòng được giữ nguyên, và khoảng trắng dài có thể làm ngắt dòng

Ví dụ sử dụng:

CSS 
    
      .normal {
        white-space: normal;
      }

      .nowrap {
        white-space: nowrap;
      }

      .pre {
        white-space: pre;
      }

      .pre-wrap {
        white-space: pre-wrap;
      }
HTML 
    
      <body>
        <div class="normal">Văn bản này sẽ được ngắt dòng nếu không đủ chỗ.</div>
        <div class="nowrap">Văn bản này sẽ không ngắt dòng và sẽ hiển thị trên một dòng.</div>
        <div class="pre">
          Văn bản này     sẽ giữ

          tất cả khoảng trắng và ngắt dòng.
        </div>

        <div class="pre-wrap">
          Văn bản này sẽ ngắt dòng, nhưng cũng sẽ giữ

          tất cả khoảng trắng và ngắt dòng.
        </div>
      </body>

8.3 Thuộc tính overflow-wrap

Thuộc tính overflow-wrap (trước đây được biết là word-wrap) điều khiển ngắt dòng các từ mà tràn ra ngoài container. Nó cho phép ngăn chặn việc tràn container với các từ dài không thể phân đoạn.

Giá trị

  • normal: ngắt dòng từ được thực hiện theo quy tắc tiêu chuẩn
  • break-word: ngắt dòng từ được thực hiện, kể cả khi cần thiết phải chia nhỏ từ

Ví dụ sử dụng:

CSS 
    
      .container {
        width: 200px;
        border: 1px solid #000;
      }

      .normal {
        overflow-wrap: normal;
      }

      .break-word {
        overflow-wrap: break-word;
      }
HTML 
    
      <body>
        <div class="container normal">Văn bản này sẽ được ngắt dòng nếu không đủ chỗ.</div>
        <div class="container break-word">Từdàikhoảngkhôngthểngắtđượcngắtđếndòngmới nếu không đủ không gian.</div>
      </body>

Giải thích mã:

  • overflow-wrap: normal;: ngắt dòng từ theo quy tắc tiêu chuẩn, không chia nhỏ từ
  • overflow-wrap: break-word;: từ dài sẽ bị chia nhỏ và ngắt đến dòng mới khi cần

8.4 Sử dụng phối hợp các thuộc tính

Các thuộc tính text-overflow, white-space, và word-wrap thường được sử dụng cùng nhau để đạt được hiệu ứng hiển thị văn bản mong muốn trong các container có kích thước giới hạn.

Ví dụ sử dụng:

CSS 
    
      .container {
        width: 200px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        overflow-wrap: break-word;
        border: 1px solid #000;
      }
HTML 
    
      <body>
        <div class="container">Văn bản này sẽ bị cắt và thay thế bằng dấu ba chấm nếu không đủ chỗ trong container.</div>
      </body>

Giải thích mã:

  • white-space: nowrap;: văn bản hiển thị trên một dòng, không ngắt dòng
  • overflow: hidden;: ẩn văn bản mà tràn ra ngoài container
  • text-overflow: ellipsis;: thêm dấu ba chấm ở cuối văn bản bị cắt
  • overflow-wrap: break-word;: ngắt từ dài nếu không đủ không gian
Bình luận
TO VIEW ALL COMMENTS OR TO MAKE A COMMENT,
GO TO FULL VERSION