Khi bạn tìm kiếm “CSS nowrap”, bạn có thể đang tìm thuộc tính CSS white-space. Bài viết này bao gồm mọi thứ bạn cần biết về nowrap.

Bạn đang xem : css bao phủ trên không gian

Khi văn bản tải trên một trang web, hành động mặc định là in văn bản trên một dòng cho đến khi văn bản ở cuối , và sau đó văn bản kết thúc và tiếp tục trên dòng tiếp theo. Tuy nhiên, có thể có những lúc bạn không muốn điều này xảy ra, chẳng hạn như khi bạn muốn sử dụng CSS ngay bây giờ.

Trong bài viết này, chúng tôi sẽ xem xét cách bạn có thể sử dụng giá trị nowrap, cùng với thuộc tính CSS white-space, để thay đổi hành động gói mặc định này. Chúng tôi cũng sẽ xem xét các phương pháp khác mà bạn có thể sử dụng để ngăn văn bản bị ngắt dòng.

CSS nowrap là gì?

Giá trị nowrap chỉ ra rằng văn bản trong phần tử HTML không được bao bọc. Trên thực tế, có một số cách để áp dụng phần tử này tùy thuộc vào loại phần tử bạn đang cố gắng sửa đổi. Một cách để đảm bảo rằng văn bản trong một phần tử không bao bọc là thêm thuộc tính HTML nowrap vào phần tử và hoàn toàn không sử dụng bất kỳ CSS nào, nhưng bạn chỉ có thể sử dụng thuộc tính này với một số phần tử và nó không linh hoạt cho lắm. Sử dụng CSS thường là cách tốt nhất để sử dụng, vì vậy hãy cùng xem cách thực hiện điều đó.


Chương trình đào tạo dành cho nhà phát triển web 2022

4.7

(237.990)

REDONE HOÀN TOÀN – Khóa học duy nhất bạn cần để học phát triển web – HTML, CSS, JS, Node và hơn thế nữa! | Bởi Colt Steele

Khám phá khóa học

Thuộc tính CSS white-space

Cách phổ biến nhất để ngăn văn bản bị bao bọc là sử dụng thuộc tính khoảng trắng của CSS. Thuộc tính này sẽ chấp nhận một trong năm giá trị sau:

  • bình thường
  • hiện tại
  • trước
  • pre-line
  • pre-wrap
  • ngắt khoảng cách
  • < / ul>

    Như bạn có thể thấy ở trên, nowrap là một trong những giá trị bạn có thể đặt thuộc tính này. Đó thực sự là tất cả những gì bạn phải làm để ngăn văn bản nằm trong một phần tử nhất định, nhưng hãy kiểm tra từng giá trị một trong những giá trị này để bạn biết nên sử dụng giá trị nào khi nào.

    Giá trị thuộc tính khoảng trắng CSS

    Để chứng minh cách hoạt động của thuộc tính CSS white-space, chúng tôi sẽ sử dụng đoạn mã sau. Đây là HTML:

    & lt; div class = ”box” & gt;
    & lt; h3 & gt;
    normal
    & lt; / h3 & gt;
    & lt; div class = ”normal” & gt;
    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    Vivamus vestibulum non arcu ut rowo.
    Etiam auctor, elit utequat ultrices, justo felis ultricies quam, euotersula eros velit ut mauris.
    < br /> & lt; / div & gt;
    & lt; / div & gt;

    & lt; div class = ”box” & gt;
    & lt; h3 & gt;
    nowrap
    & Lt; / h3 & gt;
    & lt; div class = ”nowrap” & gt;
    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    Vivamus vestibulum non arcu ut Goodso.
    Etiam auctor, elit utequat ultrices, justo felis ultricies quam, euotersula eros velit ut mauris.

    & lt; / div & gt;
    & lt; / div & gt;

    & lt; div class = ”box” & gt;
    & lt; h3 & gt;
    pre
    & lt; / h3 & gt;
    & lt; div class = ”pre” & gt;
    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    Vivamus vestibulum non arcu ut Goodso.
    Etiam auctor, elit utequat ultrices, justo felis ultricies quam, euotersula eros velit ut mauris.

    & lt; / div & gt;
    & lt; / div & gt;

    & lt; div class = ”box” & gt;
    & lt; h3 & gt;
    pre-line
    & lt; / h3 & gt;
    & lt; div class = ”pre-line” & gt; < br />
    & lt; / div & gt;
    & lt; / div & gt;

    & lt; div class = ”box” & gt;
    & lt; h3 & gt;
    Pre-wrap
    & lt; / h3 & gt;
    & lt; div class = ”pre-wrap” & gt;
    Và vì vậy, các dấu cách ngắt
    Gửi đến người là tác giả, những người ưu tú đối với hậu quả của kẻ báo thù, chỉ là con mèo, sự đền bù mà eu xe cộ eros muốn bắt đầu.
    Bạn sẽ nhận thấy trong HTML ở trên, tôi đặt thêm một số tab và ngắt dòng trong văn bản. Tuy nhiên, tất cả văn bản trong mỗi phần tử đều giống nhau, vì vậy bạn có thể thấy thuộc tính khoảng trắng ảnh hưởng như thế nào đến các ký tự khoảng trắng này.

    Đây là mã CSS:

    .box {background-color: blue; font-size: 14px;
    width: 200px;
    } white-space: normal;
    }

    .nowrap {
    ; -space: pre-line;
    }

    .pre-wrap {
    .pre-wrap {
    White-space: pre-wrap ;

    Nếu bạn muốn xem trực tiếp mã này, hãy truy cập JSFiddle này. Bây giờ, hãy xem điều gì đang xảy ra khi chúng tôi đặt từng giá trị này.

    bình thường

    Giá trị mặc định của thuộc tính khoảng trắng CSS là bình thường. Khi khoảng trắng được đặt thành bình thường, có một số quy tắc được áp dụng cho văn bản.

    • Dãy gồm nhiều ký tự khoảng trắng được thu gọn. Nghĩa là, chúng được giảm xuống thành một ký tự khoảng trắng duy nhất. Điều này xảy ra ngay cả giữa các từ.
    • Các ký tự dòng mới được coi giống như các ký tự khoảng trắng.
    • Các dòng được ngắt bất cứ khi nào cần để điền vào các phần tử.

    Đây là kết quả của việc đặt thuộc tính khoảng trắng thành bình thường:

    ngay bây giờ

    Khi bạn đặt thuộc tính CSS white-space thành nowrap, các quy tắc này sẽ được áp dụng cho văn bản:

    • Các chuỗi ký tự khoảng trắng được thu gọn như bình thường.
    • Mặc dù vậy, ngắt dòng bị bỏ qua và tất cả văn bản trong phần tử được đặt trên một dòng.
    • ul>

      Đây là cách khối bây giờ trông như thế nào trong trình duyệt. Mọi thứ được đặt trên một dòng, ngay cả khi nó bị cắt bỏ. Hiện tại nó trông không đẹp lắm, nhưng khi thuộc tính CSS này được đặt thành nowrap, nó thường được kết hợp với thuộc tính tràn CSS trong thiết kế web để tạo ra các hiệu ứng khác nhau, mà chúng tôi sẽ mô tả sau. Tôi đã đánh dấu văn bản để bạn có thể thấy nó vượt ra ngoài khối.

      trước

      Giá trị CSS này hoạt động tương tự như HTML & lt; pre & gt; nhãn. Khi bạn sử dụng giá trị trước trong thuộc tính khoảng trắng, các quy tắc sau sẽ áp dụng:

      • Các dãy ký tự khoảng trắng được giữ nguyên, không bị thu gọn.
      • Các dòng chỉ được ngắt khi có ngắt dòng hoặc & lt; br / & gt; trong nguồn.

      Đây là cách nó trông như thế nào khi nó được sử dụng trong mã HTML ở trên. Lưu ý rằng bạn thực sự có thể thấy các tab tôi đặt trong văn bản và các dòng ngắt chính xác như tôi đã viết.

      dòng trước

      Khi bạn sử dụng giá trị đầu dòng, các quy tắc này sẽ được áp dụng:

      • Chuỗi ký tự khoảng trắng bị thu gọn.
      • Các dòng bị ngắt ở & lt; br / & gt; thẻ, dòng mới trong nguồn và khi văn bản đến rìa của phần tử.

      Đây là cách HTML hiển thị với thẻ này:

      gói trước

      Khi bạn đặt thuộc tính khoảng trắng thành gói trước, trình duyệt sẽ áp dụng các quy tắc sau:

      • Các dãy ký tự khoảng trắng được giữ nguyên, không bị thu gọn.
      • Các dòng bị ngắt ở & lt; br / & gt; thẻ, dòng mới trong nguồn và khi văn bản đến rìa của phần tử.

      Đây là kết quả khi chúng tôi sử dụng giá trị này:

      dấu cách ngắt quãng

      Hoạt động của dấu cách cũng giống như pre-wrap, ngoại trừ:

      • Các ký tự khoảng trắng được lưu giữ sẽ chiếm khoảng trắng, kể cả ở cuối dòng.
      • Có thể xảy ra ngắt dòng sau bất kỳ ký tự khoảng trắng nào, kể cả ký tự bất kỳ trong chuỗi khoảng trắng.

      Đây là văn bản của chúng tôi khi chúng tôi đặt khoảng trắng thành dấu cách:

      Cách trình duyệt xử lý khoảng trắng

      Có thể khó để phân biệt từng giá trị này làm gì, vì vậy việc phân tích sẽ giúp ích cho bạn. Tham khảo danh sách các thuật ngữ để biết định nghĩa:

      • Thu gọn: Thu gọn áp dụng cho khoảng trắng. Khi thu gọn khoảng trắng, nhiều ký tự khoảng trắng trong văn bản sẽ được giảm thành một ký tự.
      • Kết thúc: Nội dung bắt đầu trên một dòng và tiếp tục sang dòng tiếp theo khi đến cuối phần tử chứa nội dung đó.
      • Không có phần kết thúc: Nội dung chỉ hiển thị trên một dòng .
      • Giữ nguyên: Điều này có nghĩa là “giữ nguyên” các khoảng trắng văn bản, ngắt dòng, tab và các ký tự định dạng khác trong văn bản. Nó thường được sử dụng cho mã và văn bản khác mà ở đó ngắt dòng và khoảng trắng là quan trọng.
      • Xóa: Đây chính xác là âm thanh của nó. Đôi khi khoảng trắng ở cuối dòng sẽ bị xóa một cách đơn giản.
      • Treo: Thuật ngữ này được sử dụng để xác định điều gì sẽ xảy ra với khoảng trắng. Nếu nó bị treo, nó sẽ vẫn ở cuối dòng. Nếu không, nó sẽ chuyển sang dòng tiếp theo.

      Dưới đây là bảng tóm tắt hoạt động của các giá trị khoảng trắng:

      Dòng mới Dấu cách, tab Bao văn bản Khoảng trắng cuối dòng > Khoảng trắng khác ở cuối dòng bình thường Thu gọnCollapseWrapRemoveHang nowrap CollapseCollapseNo wrapRemoveHang pre PreservePreserve Không quấnPreserveKhông bọc pre-wrap < / strong> PreservePreserveWrapHangHang dòng trước PreserveCollapseWrapRemoveHang ngắt khoảng cách PreservePreserveWrapWrapWrap

      Xử lý tràn khi sử dụng nowrap

      Thuộc tính tràn CSS cho trình duyệt biết phải làm gì với nội dung khi nội dung quá lớn không thể vừa với một khu vực. Khi bạn thiết lập khoảng trắng thành nowrap, bạn thường muốn kết hợp thuộc tính này với thuộc tính tràn để văn bản không bị cắt đột ngột khi nó chạm đến cạnh của một phần tử như trong ví dụ chúng ta có ở trên.

      Bạn có thể đặt thuộc tính tràn CSS thành một trong các giá trị sau:

      • hiển thị : Đây là giá trị mặc định. Phần tràn không bị cắt. Nội dung tiếp tục hiển thị bên ngoài phần tử.
      • ẩn : Phần tràn bị cắt và phần còn lại của nội dung sẽ không được nhìn thấy.
      • cuộn : Phần tràn bị cắt nhưng một thanh cuộn được thêm vào để bạn có thể cuộn để xem phần còn lại của nội dung.
      • tự động : Đây là giống như cuộn, nhưng nó chỉ thêm thanh cuộn khi cần thiết thay vì luôn hiển thị.

      Dưới đây là một ví dụ về việc sử dụng các giá trị này trong CSS:

      .visible {
      tràn: hiển thị;
      white-space: nowrap;
      }

      .hipris {
      tràn: ẩn;
      trắng -space: nowrap;
      }

      .scroll {
      tràn: scroll;
      white-space: nowrap;
      }

      .auto {
      tràn: auto;
      white-space: nowrap;
      }

      Và đây là những gì chúng tôi nhận được khi áp dụng các kiểu này cho khối mà chúng tôi đã sử dụng trong phần mã cuối cùng của mình:

      Bạn cũng có thể thấy mã này đang chạy trực tiếp và thử nghiệm với nó tại JSFiddle này.

      CSS là một ngôn ngữ mạnh mẽ như chúng ta đã thấy ở trên. Nhiều nhà phát triển nghĩ rằng họ phải sử dụng JavaScript để có được một số hiệu ứng này, nhưng bạn có thể làm điều đó với CSS thuần túy. Để tìm hiểu thêm về CSS, hãy đọc các bài viết của chúng tôi về kỹ thuật lớp phủ CSS hoặc sự khác biệt giữa CSS và SaSS . Nhưng để thực sự xây dựng kỹ năng của bạn, hãy bắt đầu với một trong nhiều khóa học CSS phổ biến của chúng tôi.

      Trang được cập nhật lần cuối:


Xem thêm những thông tin liên quan đến chủ đề bọc css trên không gian

Học lập trình Web A-Z – CSS – Bài 4 – Cách sử dụng không gian 3 chiều trong HTML

  • Tác giả: Thư Viện Lập Trình – TIP & STORY
  • Ngày đăng: 2017-01-17
  • Đánh giá: 4 ⭐ ( 9375 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Các VIDEO dạy học sẽ chỉ được cập nhật ở kênh mới là: Thư Viện Lập Trình – EDU
    https://www.youtube.com/channel/UCdFgDwwUC_D_Bd1vUDEMBtA

Flexbox trong CSS

  • Tác giả: websitehcm.com
  • Đánh giá: 5 ⭐ ( 8926 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Flexbox trong CSS w3seo tìm hiểu về thuộc tính flex trong CSS, cách sử dụng flexbox để thiết kế layout trong html

Bài 10: Học CSS3

  • Tác giả: freetuts.net
  • Đánh giá: 5 ⭐ ( 1712 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Xử lý hiệu ứng 2D Transform trong CSS3, một số thuộc tính như translate scale skew skewX skewY và matrix trong CSS3 và các ví dụ

Thuộc tính padding trong CSS

  • Tác giả: viettuts.vn
  • Đánh giá: 3 ⭐ ( 2186 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Thuộc tính padding trong CSS cho phép bạn xác định khoảng không gian giữa nội dung hiển thị của một phần tử với đường viền (border) của nó.

Bạn tưởng CSS đơn giản và dễ học? Bạn sẽ nghĩ lại sau khi đọc bài viết này!

  • Tác giả: toidicodedao.com
  • Đánh giá: 5 ⭐ ( 1068 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Trong ngành lập trình Web, HTML/CSS/JavaScript là những thứ cực kì căn bản. Muốn làm một Web developer, ít nhiều gì ta cũng phải học và thành thạo những thứ trên. Tuy vậy, khi trò chuyện với một số bạn học và làm về web, mình thấy các bạn có một suy nghĩ chung là:…

Đặt di động và không gian di động trong CSS?

  • Tác giả: qastack.vn
  • Đánh giá: 5 ⭐ ( 2360 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: [Tìm thấy giải pháp!] Khái niệm cơ bản Để kiểm soát “cellpadding” trong CSS, bạn chỉ cần sử dụng paddingtrên…

Bố cục với CSS – Căn chỉnh theo chiều ngang

  • Tác giả: www.codelean.vn
  • Đánh giá: 3 ⭐ ( 1713 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: CodeLean.vn là nơi chia sẻ kiến thức của những người học, làm và dạy trong lĩnh vực công nghệ thông tin.

Xem thêm các bài viết khác thuộc chuyên mục: Kiến thức lập trình

Xem Thêm  8. Lỗi và ngoại lệ - Tài liệu Python 3.10.5 - python thử lỗi ngoại lệ

By ads_php