Làm cách nào để ngắt dòng trong html mà không có br?

Thử nó

Như bạn có thể thấy từ ví dụ trên, một phần tử

Ghi chú. Không sử dụng

Thuộc tính

Các thuộc tính của phần tử này bao gồm các thuộc tính toàn cục

Thuộc tính không dùng nữa

Cho biết vị trí bắt đầu dòng tiếp theo sau dấu ngắt

Tạo kiểu với CSS

Phần tử

Bạn có thể tự đặt

ví dụ

Đơn giản thôi

Trong ví dụ sau, chúng tôi sử dụng các phần tử

Mozilla<br />
331 E. Evelyn Avenue<br />
Mountain View, CA<br />
94041<br />
USA<br />

Kết quả trông giống như vậy

Mối quan tâm về khả năng tiếp cận

Tạo các đoạn văn bản riêng biệt bằng cách sử dụng

Sử dụng các phần tử

Tóm tắt kỹ thuật

Thể loại nội dung Nội dung dòng chảy, nội dung cụm từ. Nội dung được phép Không có; . Bỏ qua thẻ Phải có thẻ bắt đầu và không được có thẻ kết thúc. Trong tài liệu XHTML, hãy viết phần tử này là

Khi viết HTML, bạn thường cần chèn ngắt dòng. Ngắt dòng là cần thiết trong địa chỉ, bài thơ hoặc khi văn bản vượt quá chiều rộng trình duyệt có sẵn. Nếu bạn không chèn dấu ngắt dòng của riêng mình, thì văn bản sẽ được định dạng theo một cách kỳ lạ

Trong hướng dẫn này, tôi sẽ chỉ cho bạn cách chèn ngắt dòng trong mã HTML của bạn với một số ví dụ "có và không có", để bạn có thể bắt đầu sử dụng nó một cách chính xác và định dạng văn bản của mình tốt hơn

Cú pháp ngắt dòng HTML cơ bản

Bạn có thể chèn ngắt dòng trong HTML bằng thẻ

Xin lưu ý rằng HTML sẽ bỏ qua bất kỳ ngắt dòng nào từ phím quay lại của bàn phím

Nếu bạn đang thắc mắc tại sao lại có dấu gạch chéo lên trong thẻ

Nếu bạn đang sử dụng một trình định dạng mã như đẹp hơn, nó sẽ luôn chèn dấu gạch chéo khi bạn lưu hoặc dán ngay cả khi bạn không đặt nó vào đó

Cách chèn ngắt dòng trong địa chỉ

Ngắt dòng rất quan trọng khi bạn viết địa chỉ trên một bức thư, chẳng hạn như để định dạng đúng

Đây là một ví dụ về một địa chỉ không ngắt dòng

Địa chỉ không có ngắt dòng (

     The White House, 1600 Pennsylvania Avenue NW Washington, DC 20500, USA.

Tôi đã thêm một số mã CSS để căn giữa mọi thứ với Flexbox và làm cho văn bản lớn hơn một chút

body {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
    font-size: 3rem;
    max-width: 1000px;
    margin: 0 auto;
}

Đây là giao diện của nó trong trình duyệt

Đây là địa chỉ có ngắt dòng

Và đây là cách chúng ta có thể thêm ngắt dòng để định dạng đúng địa chỉ của mình

    The White House 

    1600 Pennsylvania Avenue 

    NW Washington, DC 

    20500 

    USA

Nó trông như thế này trong trình duyệt

Cách thêm ngắt dòng vào bài thơ

Các bài thơ thường được viết bằng các câu ngắt quãng ngắn để tạo ra các thứ bậc hình ảnh và định dạng chúng một cách độc đáo.

Vì vậy, nếu bạn muốn viết một bài thơ trong mã HTML của mình, thẻ

Bài thơ không ngắt dòng

      I dabbled around a lot when I decided to learn to code 
      I went from A to Z with resources 
      When I decided to make my own things 
      I discovered I've been in the old all while 
      So I remained a novice in coding 
      But then I found freeCodeCamp 
      I got my hands on the platform 
      I went from novice to ninja in coding 
     And now I'm a camper for life

Nó trông như thế này trong trình duyệt

Bạn có thể thấy bài thơ không có hệ thống phân cấp trực quan, nó không được định dạng đúng cách và vì vậy nó không thể đọc được như một bài thơ

Bài thơ có ngắt dòng

      I dabbled around a lot when I decided to learn to code 

      I went from A to Z with resources 

      When I decided to make my own things 

      I discovered I've been in the old all while 

      So I remained a novice in coding 

      But then I found freeCodeCamp 

      I got my hands on the platform 

      I went from novice to ninja in coding 

      And now I'm a camper for life 

Tôi cũng đã thay đổi kích thước phông chữ một chút trong CSS

body {
   display: flex;
   align-items: center;
   justify-content: center;
   height: 100vh;
   font-size: 2.5rem;
   max-width: 1000px;
   margin: 0 auto;
}

Bây giờ nó trông như thế này trong trình duyệt

Bạn có thể thấy rằng bài thơ bây giờ dễ đọc hơn và được định dạng đúng cách

Một số lời khuyên có giá trị. Không sử dụng thẻ

     The White House, 1600 Pennsylvania Avenue NW Washington, DC 20500, USA.

     The White House, 1600 Pennsylvania Avenue NW Washington, DC 20500, USA.

     The White House, 1600 Pennsylvania Avenue NW Washington, DC 20500, USA.

     The White House, 1600 Pennsylvania Avenue NW Washington, DC 20500, USA.

     The White House, 1600 Pennsylvania Avenue NW Washington, DC 20500, USA.

Bạn có thể thắc mắc - vì thẻ

Vâng, nó có thể. Nhưng thực tế không có nhu cầu thực sự để tạo kiểu cho nó vì tất cả những gì nó làm là tạo ra một vài khoảng trắng

Sự kết luận

Tôi hy vọng hướng dẫn này đã cung cấp cho bạn kiến ​​thức cơ bản cần thiết để sử dụng thẻ

Cảm ơn bạn đã đọc và tiếp tục mã hóa