Các nút thường được tạo với sự trợ giúp của HTML, hoặc thẻ. Trong khi tạo các nút, bạn có thể cần thêm ngắt dòng khi nút của bạn chứa một văn bản dài. Cách dễ nhất để ngắt dòng là sử dụng thẻ trên văn bản của bạn. Nó được sử dụng để chèn một lần phá vỡ một dòng. Ví dụ về việc tạo một nút với một đường ngắt bằng cách sử dụng thẻ:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<h2>Button with line break</h2>
<button type="submit">My<br />Button</button>
</body>
</html>
Kết quảMột cách khác để thêm một ngắt dòng là sử dụng thuộc tính Break Word Break, chỉ định cách các từ sẽ bị phá vỡ khi đạt đến phần cuối của một dòng. Đặt văn bản nút của bạn vào một yếu tố và cung cấp kiểu dáng cho nó. Sử dụng giá trị "Keep-All" của thuộc tính Word-break và đặt chiều rộng. Ví dụ về việc tạo một nút với một đường ngắt bằng cách sử dụng thuộc tính Word-break:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
span {
display: block;
width: 50px;
padding: 0 20px;
margin: 0;
word-break: keep-all;
text-align: center;
}
</style>
</head>
<body>
<h2>Button with word-break</h2>
<button type="submit">
<span>My Button Example</span>
</button>
</body>
</html>
Một cách khác nhau để thêm một ngắt dòng là sử dụng thuộc tính Flex-Awrap với giá trị "bọc" của nó, trong đó xác định rằng các mục linh hoạt sẽ bọc khi cần thiết. Ở đây bạn cũng cần đặt thuộc tính chiều rộng cho nút của mình. Ví dụ về việc tạo một nút với một đường ngắt bằng cách sử dụng thuộc tính Flex-Wrap:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.btn {
display: flex;
flex-wrap: wrap;
width: 80px;
padding: 10px;
}
</style>
</head>
<body>
<h2>Button with flex-wrap</h2>
<button class="btn" type="submit">My Button Example</button>
</body>
</html>
Hãy cùng xem một ví dụ khác, nơi chúng tôi sử dụng các kiểu kiểu dáng và thuộc tính onclick bổ sung cho nút của chúng tôi.onclick attribute for our button. Ví dụ về việc tạo một nút theo kiểu với độ ngắt dòng:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.btn {
display: inline-block;
padding: 10px 25px;
margin: 4px 2px;
background-color: #1c87c9;
border: 3px solid #095484;
border-radius: 5px;
text-align: center;
text-decoration: none;
font-size: 20px;
color: #fff;
cursor: pointer;
}
</style>
</head>
<body>
<button class="btn" onclick="window.location.href='https://www.w3docs.com';" type="submit">
Click <br />Me!
</button>
</body>
</html>
Như chúng tôi đã đề cập, cũng có thể tạo các nút với các yếu tố và các yếu tố. Hãy xem làm thế nào chúng ta có thể thêm các lỗi trong các nút được tạo bằng các yếu tố này. Ví dụ về việc thêm một đường ngắt dòng trong một nút được tạo bằng thẻ HTM:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.btn {
display: flex;
flex-wrap: wrap;
cursor: pointer;
width: 50px;
padding: 10px;
text-decoration: none;
background-color: lightblue;
text-align: center;
border-radius: 10px;
}
</style>
</head>
<body>
<h2>Button with the <a> tag </h2>
<a class="btn" href="https://www.w3docs.com/learn-git.html">Learn Git</a>
</body>
</html>
Trong ví dụ sau, chúng tôi sử dụng thuộc tính không gian trắng với giá trị "bình thường" và đặt thuộc tính bao nhiêu từ thành "từ chia". Ví dụ về việc thêm một đường ngắt dòng trong một nút được tạo bằng thẻ HTM:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.btn {
display: inline-block;
width: 110px;
white-space: normal;
word-wrap: break-word;
padding: 15px 25px;
margin: 10px;
background-color: lightblue;
border: 2px solid #56a9de;
border-radius: 5px;
text-align: center;
outline: none;
font-size: 18px;
color: #ffffff;
cursor: pointer;
}
</style>
</head>
<body>
<input type="button" class="btn" value="Some text" />
</body>
</html>
| 
