Làm cách nào để thêm chuỗi vào thẻ trong html?

Ngắt dòng, đúng như tên gọi, là ngắt dòng 😅. Ngắt dòng trong HTML là điểm mà một dòng kết thúc theo chiều ngang và dòng tiếp theo bắt đầu trên một dòng mới

Trong HTML, khi bạn viết một chuỗi như thế này

    Hello, I am
    trying to create a
    new line

Khoảng trắng (khoảng trống tab trước "Xin chào", khoảng cách giữa "am" và "trying", "a" và "new") sẽ bị bỏ qua. Kết quả trên màn hình sẽ hiện ra như thế này

Hello, I am trying to create a new line

Một cách để khắc phục điều này (dù không hiệu quả lắm) là tạo ba thẻ

Hello, I am trying to create a new line

8 như thế này

Hello, I am
trying to create a
new line

Điều này sẽ dẫn đến kết quả như sau

Hello, I am
trying to create a
new line

Bởi vì các thẻ

Hello, I am trying to create a new line

9 tạo ra các phần tử

Hello, I am trying to create a new line

0, chúng chiếm toàn bộ không gian theo chiều ngang và phần tử tiếp theo sẽ chuyển sang dòng tiếp theo – như bạn có thể thấy từ kết quả ở trên

Giải pháp này không hiệu quả vì bạn đã tạo ba đoạn văn. Trong trường hợp trình đọc màn hình diễn giải điều này, nó sẽ đọc thành ba đoạn văn thay vì một câu. Điều này có thể ảnh hưởng đến khả năng truy cập web

Vậy làm cách nào để bạn thêm ngắt dòng cho phần tử nội tuyến?

Cách thêm ngắt dòng trong HTML

HTML có các thẻ cho nhiều mục đích, kể cả để tạo ngắt dòng. Bạn có thể sử dụng thẻ

Hello, I am trying to create a new line

1 trong HTML để thêm ngắt dòng. Nó có thể đi giữa các phần tử nội tuyến để chia các phần tử thành nhiều phần

Đây là một ví dụ về đoạn văn có thẻ

Hello, I am trying to create a new line

1

    Hello, I am
    

    trying to create a
    

    new line

Thẻ

Hello, I am trying to create a new line

1 là phần tử void không có thẻ đóng. Thay vào đó, nó là một thẻ tự đóng

Đoạn mã trên dẫn đến điều này

Hello, I am
trying to create a
new line

Bạn có thể sử dụng thẻ này cho các dạng phần tử nội tuyến khác như liên kết. Ví dụ, nhìn vào mã này

Hello, I am trying to create a new line

0

Các thẻ neo,

Hello, I am trying to create a new line

4, là các phần tử nội tuyến, vì vậy thay vì liên kết thứ hai hiển thị trên dòng tiếp theo, nó sẽ hiển thị trong cùng một dòng như thế này

Bạn có thể sử dụng thẻ

Hello, I am trying to create a new line

1 giữa các liên kết để ngắt dòng liên kết đầu tiên

Hello, I am trying to create a new line

3

Kết luận

Thẻ

Hello, I am trying to create a new line

1 trong HTML bắt đầu phần tử tiếp theo trên một dòng mới, tương tự như dấu xuống dòng

Hello, I am trying to create a new line

7 trong chuỗi

Thay vì sử dụng các phần tử khối để đặt các phần tử vào dòng mới, bạn có thể sử dụng thẻ ngắt dòng.

Hello, I am trying to create a new line

1

Trong các trường hợp như câu, việc sử dụng thẻ

Hello, I am trying to create a new line

1 đóng vai trò ngắt dòng trực quan và không ảnh hưởng đến khả năng truy cập. Trình đọc màn hình sẽ đọc câu không ngừng nghỉ

QUẢNG CÁO

QUẢNG CÁO

QUẢNG CÁO

---

Dillion Megida

Người ủng hộ nhà phát triển và Người sáng tạo nội dung đam mê chia sẻ kiến ​​thức của tôi về Công nghệ. Tôi dạy JavaScript / ReactJS / NodeJS / React Frameworks / TypeScript / et al

---

Nếu bạn đọc đến đây, hãy tweet cho tác giả để cho họ thấy bạn quan tâm. Tweet một lời cảm ơn

Học cách viết mã miễn phí. Chương trình giảng dạy mã nguồn mở của freeCodeCamp đã giúp hơn 40.000 người có được việc làm với tư cách là nhà phát triển. Bắt đầu

ví dụ

Tham gia hai chuỗi

let text1 = "sea";
let text2 = "food";
let result = text1. concat(text2);

Tự mình thử »

Tham gia hai chuỗi

let text1 = "Xin chào";
let text2 = "thế giới. ";
let result = text1. concat(" ", text2);

Tự mình thử »

Thêm ví dụ bên dưới

---

Định nghĩa và cách sử dụng

Phương thức

Hello, I am
trying to create a
new line

0 nối hai hoặc nhiều chuỗi

Phương thức

Hello, I am
trying to create a
new line

0 không thay đổi các chuỗi hiện có

Phương thức

Hello, I am
trying to create a
new line

0 trả về một chuỗi mới

---

cú pháp

chuỗi. concat(chuỗi1, chuỗi2,. , chuỗiX)

Thông số

ParameterDescriptionstring1,
string2,
.
stringXRequired.
Các chuỗi cần nối.

Giá trị trả về

TypeDescriptionMột chuỗiMột chuỗi mới chứa các chuỗi kết hợp

---

---

Thêm ví dụ

Tham gia ba chuỗi

let text1 = "Xin chào";
let text2 = "thế giới. ";
let text3 = "Chúc một ngày tốt lành. ";
let result = text1. concat(" ", text2, " ", text3);

Tự mình thử »

---

Hỗ trợ trình duyệt

Hello, I am
trying to create a
new line

0 là một tính năng ECMAScript1 (ES1)

ES1 (JavaScript 1997) được hỗ trợ đầy đủ trên mọi trình duyệt

ChromeEdgeFirefoxSafariOperaIECóCóCóCóCóCó

---

Bạn có thể thêm HTML vào một chuỗi không?

Làm cách nào để thêm một chuỗi HTML trong DOM?

Làm cách nào để thêm một chuỗi vào một phần tử trong JavaScript?

Làm cách nào để chuyển đổi chuỗi thành HTML?