Khi bạn đang viết HTML, bạn thường cần phải chèn các dấu ngắt dòng. Dấu ngắt dòng là điều 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 các 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ẽ đến

Bạn đang xem: ngắt dòng thẻ html

Khi viết HTML, bạn thường cần chèn các ngắt dòng. Dấu ngắt dòng là điều 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 các 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”, để bạn có thể bắt đầu sử dụng đúng cách 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 dấu ngắt dòng trong HTML bằng thẻ & lt; br & gt; , tương đương với dấu xuống dòng trên bàn phím.

Hãy 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.

  & lt; br / & gt;
 

Nếu bạn đang thắc mắc tại sao lại có dấu gạch chéo trong thẻ & lt; br & gt; ở trên, thì dấu gạch chéo này rất quan trọng khi HTML4 vẫn được sử dụng rộng rãi. Với HTML5, bạn không cần phải đặt dấu gạch chéo vào nó nữa. Nhưng cả hai đều sẽ làm điều tương tự.

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 Dấu ngắt Dòng trong Địa chỉ

Ví dụ: ngắt dòng rất quan trọng khi bạn viết địa chỉ trên một lá thư để định dạng đúng.

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

Địa chỉ không có dấu ngắt dòng (thẻ & lt; br & gt; ) trông giống như sau:

  & lt; p & gt;
     Nhà Trắng, 1600 Đại lộ Pennsylvania, NW Washington, DC 20500, Hoa Kỳ.
& lt; / p & gt;
 

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 {
    hiển thị: flex;
    align-các mục: trung tâm;
    justify-content: trung tâm;
    chiều cao: 100vh;
    kích thước phông chữ: 3rem;
    chiều rộng tối đa: 1000px;
    margin: 0 auto;
}
 

Đây là giao diện của nó trong trình duyệt:
address-without-line-break

Xem Thêm  Làm thế nào để vô hiệu hóa các liên kết. Thủ thuật CSS - css loại bỏ kiểu liên kết

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

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

  & lt; p & gt;
    Nhà Trắng & lt; br / & gt;
    1600 Đại lộ Pennsylvania & lt; br / & gt;
    NW Washington, DC & lt; br / & gt;
    20500 & lt; br / & gt;
    Hoa Kỳ
& lt; / p & gt;
 

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

address-with-line-break

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

Các bài thơ thường được viết bằng những câu ngắt quãng ngắn để tạo thứ bậc trực quan và định dạng chúng đẹp mắt.

Vì vậy, nếu bạn muốn viết một bài thơ bằng mã HTML của mình, thẻ & lt; br & gt; giúp quá trình định dạng dễ dàng hơn cho bạn.

Một bài thơ không có ngắt dòng

  & lt; p & gt;
      Tôi đã vấp ngã rất nhiều khi quyết định học viết mã
      Tôi đã đi từ A đến Z với các nguồn lực
      Khi tôi quyết định làm những thứ của riêng mình
      Tôi phát hiện ra rằng tôi đã ở trong tình cũ trong suốt thời gian qua
      Vì vậy, tôi vẫn là một người mới trong lĩnh vực viết mã
      Nhưng sau đó tôi tìm thấy freeCodeCamp
      Tôi đã đặt tay trên nền tảng
      Tôi đã đi từ người mới thành ninja trong lĩnh vực viết mã
     Và bây giờ tôi là một người cắm trại cho cuộc sống
& lt; / p & gt;
 

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

Poem-without-line-break

Bạn có thể thấy bài thơ không có thứ bậc 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ơ.

Một bài thơ có ngắt dòng

 & lt; p & gt;
      Tôi đã gặp khó khăn rất nhiều khi quyết định học cách viết mã & lt; br / & gt;
      Tôi đã đi từ A đến Z với các tài nguyên & lt; br / & gt;
      Khi tôi quyết định làm những thứ của riêng mình & lt; br / & gt;
      Tôi phát hiện ra rằng tôi đã ở trong tình cũ trong khi & lt; br / & gt;
      Vì vậy, tôi vẫn là một người mới trong lĩnh vực viết mã & lt; br / & gt;
      Nhưng sau đó tôi tìm thấy freeCodeCamp & lt; br / & gt;
      Tôi đã chạm tay vào nền tảng & lt; br / & gt;
      Tôi đã đi từ người mới thành ninja trong việc viết mã & lt; br / & gt;
      Và bây giờ tôi là một người cắm trại cho cuộc sống & lt; br / & gt;
& lt; / p & gt;
 

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

  body {
   hiển thị: flex;
   align-các mục: trung tâm;
   justify-content: trung tâm;
   chiều cao: 100vh;
   kích thước phông chữ: 2,5rem;
   chiều rộng tối đa: 1000px;
   margin: 0 auto;
}
 

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

Xem Thêm  Phương thức Java String charAt () - chuỗi ký tự java tại

Poem-with-line-break

Bạn có thể thấy rằng bài thơ hiện 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ẻ & lt; br & gt; để buộc khoảng cách giữa các phần tử cấp khối ( p , < mã> h1 , h2 , h3 , div , v.v.). Thay vào đó, hãy sử dụng thuộc tính lề CSS.

Bạn có thể thắc mắc – vì thẻ & lt; br & gt; là một phần tử, nên có thể tạo kiểu cho nó không?

Chà, có thể. Nhưng thực tế không cần thiết phải 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.

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 nền tảng mà bạn cần để sử dụng thẻ & lt; br & gt; để bạn có thể làm cho văn bản HTML của mình trông đẹp hơn.

Cảm ơn bạn đã đọc và tiếp tục viết mã.


Xem thêm những thông tin liên quan đến chủ đề dòng ngắt thẻ html

[HTML] Thẻ ngắt dòng br

alt

  • Tác giả: Sơn Vina
  • Ngày đăng: 2020-09-03
  • Đánh giá: 4 ⭐ ( 7102 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Các thẻ HTML thường sử dụng

Thẻ định dạng đoạn văn bản trong HTML, thẻ

  • Tác giả: thuthuat.taimienphi.vn
  • Đánh giá: 5 ⭐ ( 7368 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: the dinh dang doan van ban trong html, Thẻ định dạng đoạn văn bản trong HTML, thẻ

Code xuống dòng trong html line break, xuống dòng trong html bằng thẻ br

  • Tác giả: jdomain.vn
  • Đánh giá: 4 ⭐ ( 8176 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Tôi cảm thấy như tôi đang hỏi một câu hỏi rất không hay) Có cách nào để làm cho HTML xử lý ngắt dòng đúng cách không? Hoặc tôi phải thay thế chúng bằng ?https://jsfiddle, net/zawyatzt/ Điều này là để hiển thị dòng mới và trả lại vận chuyển trong html, sau đó bạn không cần phải làm điều đó một cách rõ ràng

Cách thực hiện xuống dòng trong HTML với thẻ đơn giản 2022

  • Tác giả: atpweb.vn
  • Đánh giá: 5 ⭐ ( 6839 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Thẻ xuống dòng trong HTML là một lệnh rất thường dùng trong ngôn ngữ lập trình HTML rất đơn giản và thuận tiện khi muôn sử dụng ký tự xuống dòng trong HTML. Trong bài viết này, atpweb.vn sẽ viết bài viết Cách thực hiện xuống dòng trong HTML với thẻ

Thẻ Lệnh Xuống Dòng Trong Html, Thẻ Ngắt Xuống Dòng Br Trong Html

  • Tác giả: duongmonkyhiep.vn
  • Đánh giá: 4 ⭐ ( 5139 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Các đoạn văn trong HTMLThẻ đoạn văn Hiển thị HTMLĐừng quên thẻ đóngThẻ xuống dòng Sự cố của các bài thơThẻ Các đoạn văn trong HTMLCác tài liệu của HTML được chia ra thành nhiều đoạn nhỏ, Thẻ đoạn văn Trong HTML thẻ xác định một đoạn văn bản

Các thẻ HTML cơ bản (HTML Tag)

  • Tác giả: vietjack.com
  • Đánh giá: 4 ⭐ ( 2327 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Các thẻ HTML cơ bản – Học HTML cơ bản và nâng cao theo các bước đơn giản và dễ hiểu từ HTML là gì, Tag trong HTML, HTML tag, thẻ trong HTML, tổng hợp các thẻ HTML cơ bản, thẻ meta, thuộc tính, định dạng, thẻ trong HTML, commemnt, font, marquee, hình ảnh, link, bảng, frame, danh sách, layout, màu, form, background, style sheet, và sử dụng javascript.

Thẻ


trong đoạn văn HTML

  • Tác giả: xuanthulab.net
  • Đánh giá: 3 ⭐ ( 3799 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Thẻ

    tạo ra một đoạn văn bản (paragraph), còn thẻ
    ngắt xuống dòng một đoạn text (chữ). Tìm hiểu về khoảng trắng (whitespace) trong mã HTML

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

By ads_php