×

Cách sử dụng thẻ <pre> để giữ nguyên định dạng văn bản trong HTML

Avatar of admin
admin 3 Views

Khi làm việc với HTML, định dạng văn bản có thể trở nên khá phức tạp, đặc biệt khi bạn muốn bảo toàn khoảng trắng, dấu xuống dòng và các ký tự không gian khác. Một trong những thẻ hữu ích nhất để đạt được điều này là thẻ <pre>. Thẻ <pre> (preformatted text) trong HTML được sử dụng để hiển thị văn bản với định dạng đã được bảo toàn, nghĩa là các khoảng trắng và dòng mới sẽ được giữ nguyên như khi bạn đã nhập chúng.

Cách Sử Dụng

Bạn có thể sử dụng thẻ <pre> như sau:

<pre>
  Đây là một ví dụ về văn bản được định dạng sẵn.
  Dòng này nằm bên dưới dòng đầu tiên.
      Khoảng trắng và dấu xuống dòng sẽ được bảo toàn.
</pre>

Khi bạn sử dụng thẻ <pre>, mọi định dạng văn bản như khoảng trắng, dấu tab và dấu xuống dòng sẽ được hiển thị chính xác như khi bạn đã nhập vào. Điều này rất hữu ích trong nhiều trường hợp, chẳng hạn như khi hiển thị mã nguồn, dữ liệu bảng tính, hoặc bất kỳ văn bản nào mà bạn muốn giữ nguyên định dạng.

Thuộc Tính Kết Hợp

Mặc dù thẻ <pre> có thể hoạt động một mình, việc sử dụng các thuộc tính CSS cũng có thể giúp bạn kiểm soát hiển thị của văn bản một cách tinh tế hơn.

Ví dụ:

<pre style="color: blue; font-family: monospace; background-color: #f0f0f0;">
  Đây là văn bản định dạng sẵn với một số định dạng CSS đi kèm.
  Bạn có thể sử dụng CSS để thay đổi màu sắc, font chữ và nền.
</pre>

Trong đoạn mã trên, chúng ta đã sử dụng thuộc tính style để áp dụng một số định dạng CSS cho văn bản trong thẻ <pre>. Điều này không chỉ giúp văn bản trông đẹp mắt hơn mà còn giúp làm nổi bật các phần quan trọng.

Một Số Ứng Dụng Thực Tiễn

  1. Hiển Thị Mã Nguồn: Thẻ <pre> thường được sử dụng để hiển thị đoạn mã lập trình trong các bài viết kỹ thuật, diễn đàn hoặc blog.
<pre>
  function sayHello() {
    console.log("Hello, world!");
  }
</pre>
  1. Dữ Liệu Bảng Tính: Bạn có thể dùng thẻ <pre> để hiển thị các bảng dữ liệu đơn giản mà không cần sử dụng HTML table.
<pre>
  Tên       Tuổi    Địa chỉ
  Minh      25      Hà Nội
  Lan       22      Đà Nẵng
</pre>
  1. Văn Bản Nghệ Thuật (ASCII Art): Dùng để hiển thị các bức tranh ASCII Art, nơi mà khoảng trắng và ký tự đặc biệt rất quan trọng.
<pre>
  /\_/\
 ( o.o )
  > ^ <
</pre>

Lưu Ý Khi Sử Dụng

  • Mọi ký tự bên trong thẻ <pre> sẽ được hiển thị đúng như nó xuất hiện, bao gồm cả khoảng trắng, dấu tab và dòng mới.
  • Nếu bạn sử dụng quá nhiều nội dung trong thẻ <pre>, điều này có thể gây ra tình trạng tràn văn bản và không đẹp về mặt thẩm mỹ trên các trang web di động hoặc trong các màn hình nhỏ.

Sử dụng thẻ <pre> đúng cách sẽ giúp bạn dễ dàng quản lý và hiển thị văn bản có định dạng phức tạp một cách hiệu quả, đồng thời cải thiện trải nghiệm người dùng trên trang web của bạn.

Comments

Bài viết liên quan