HTML – Giữ nguyên định dạng văn bản trong mã nguồn khi hiển thị

Khi soạn thảo văn bản với ngôn ngữ HTML, không ít lần chúng ta đã tự hỏi mình rằng? Đó là làm cách nào để hiển thị văn bản ra ngoài trình duyệt cũng giống y như lúc soạn thảo trong các text editor hay các IDE? Nghĩa là vẫn giữ nguyên các định dạng như ngắt dòng mà không cần phải sử dụng đến thẻ định dạng ngắt dòng br hay thậm chí là sử dụng nhiều hơn hai khoảng trắng. Bài viết này sẽ hướng dẫn các bạn làm điều đó một cách đơn giản nhất thông qua một thẻ có sẵn trong HTML. Đó chính là thẻ pre.

Tìm hiểu cách sử dụng thẻ pre có trong HTML

Định nghĩa

Thẻ pre, được viết tắt bởi từ pre-formatted. Nghĩa là content, hay nội dung văn bản trong thẻ pre sẽ được giữ nguyên định dạng khi trình duyệt hiển thị. Và đặc biệt là có bao nhiêu khoảng trắng bên trong thành phần pre đều hiển thị hết ra ngoài trình duyệt, đều này hoàn toàn trái ngược với cách hiển thị mã HTML thông thường là xem các văn bản ngắt dòng (bằng phím Enter) hoặc sử dụng nhiều hơn hai khoảng trắng thì đều sẽ hiển thị tương với một khoảng trắng.

Ví dụ

Ví dụ đoạn mã sau:

<pre>
uống đi
nghe vỡ tiếng đàn
nghe ta nằm với
muôn vàn
nín        câm…
</pre>

uống đi
nghe vỡ tiếng đàn
nghe ta nằm với
muôn vàn
nín    câm…

Trong đoạn paragraph trên, ta đã định dạng đoạn văn có những chỗ ngắt dòng thì khi hiển thị ra trình duyệt. Nội dung vẫn giữ nguyên định dạng đó. Nghĩa là ta có kết quả hiển thị giống như sử dụng thẻ pre. Đặc biệt là các bạn cũng đã thấy nó cho phép hiển thị nhiều hơn hai khoảng trắng (dòng cuối cùng của văn bản).

Lưu ý

Thông qua ví dụ trên chúng ta thấy rằng thẻ pre-formatted, như tên gọi của nó, được dành riêng cho việc định dạng văn bản. Có những đoạn văn có kiểu hiển thị khá đặc biệt. Ví dụ như thơ ca, các câu trích dẫn thì ta nên sử dụng thẻ pre. Thứ nhất về mặt ý nghĩa thì nó đúng với chức năng. Thứ hai ta tiết kiệm thời gian và không gian cho việc xử lý ngắt dòng cũng như xử lý khoảng trắng đối với những loại văn bản này. Thẻ pre-formatting chỉ giữ các khoảng trắng và ngắt dòng của đoạn văn được viết trong mã nguồn html. Do đó, các bạn có thể viết các thẻ html khác vào trong nó.

Sử dụng CSS để giữ nguyên định dạng

Ngoài cách sử dụng thẻ pre ra, vẫn còn một cách nữa đối với những bạn thích dùng CSS hơn đó là sử dụng một thuộc tính rất thú vị liên quan tới text đó là white-space. Đây là property điều khiển cách mà các khoảng trắng cũng như việc xuống hàng trong đoạn văn sẽ như thế nào.

Như chúng ta đã biết, tất cả những khoảng trắng cũng như xuống dòng dư thừa đều bị bỏ qua khi hiển thị trên trình duyệt. Và nếu chúng ta muốn giữ lại thì phải sử dụng thẻ pre của HTML. Nhưng khi biết CSS, ta sẽ sử dụng thuộc tính white-space này để giải quyết việc đó.

Thuộc tính white-space

Giá trị cho thuộc tính này mà ta cần tìm hiểu đó là pre, giá trị này thì có chức năng giống y như thẻ pre, nghĩa là nó sẽ giữ nguyên định dạng đoạn văn gồm các khoảng trắng, indent và các line break.

Hãy thử viết lại đoạn mã trên với thuộc tính này để kiểm tra xem có đúng không nhé?

<p style=”white-space: pre;”>uống đi    nghe vỡ tiếng     đàn. Nghe ta nằm với muôn vàn      nín câm…</p>

uống đi    nghe vỡ tiếng     đàn. Nghe ta nằm với muôn vàn      nín câm…

Đúng là tuyệt vời ông mặt trời!

Lưu ý khi sử dụng

Thuộc tính white-space ngoài giá trị pre ra vẫn còn một số giá trị khác nữa giúp cho việc định dạng văn bản trở nên linh động hơn. Các bạn có thể tìm hiểu nó thông qua tài liệu của W3C tại đây. Hoặc bạn nào đang tham gia khóa học CSS của CiOne các bạn có thêm tham khảo nó tại chương học thứ 4 nói về các thuộc tính dành cho văn bản khá chi tiết

Kết luận

Thông qua bài viết này, các bạn lại biết thêm các kỹ thuật hữu ích trong việc định dạng văn bản. Chính xác hơn là cách để hiển thị văn bản đúng như những gì trong mã nguồn HTML thể hiện. Quá đơn giản và quá tuyệt vời đúng không? Chỉ cần sử dụng thẻ pre hoặc sử dụng thuộc tính white-space với giá trị pre trong CSS là xong. Giờ thì các bạn hãy nghỉ tay thư giãn chút đã