資料結構
網路
關係資料庫管理系統
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理
化學
生物
數學
英語
經濟學
心理學
社會學
時尚研究
法律研究如何建立帶換行的按鈕？
HTML 的<button> 元素是一個互動式元素，使用者可以透過滑鼠點選或鍵盤快捷鍵啟用它。一旦啟用，它就會執行一個可程式設計的操作，例如提交表單或開啟對話方塊。按鈕通常使用 HTML 的 <button>、<input> 或 <a> 標籤建立。
語法
<button type = "button">
除了“type” 屬性之外，按鈕標籤還使用其他屬性，例如 autofocus、disabled、form、formaction、formmethod、value 等。
當按鈕包含較長的文字時，在建立它時就需要新增換行。下面討論了幾種實現此目的的方法。
使用 <br> 標籤
HTML 的 <br> 標籤用於在任何文字中插入單個換行符。它是一個空標籤，因此沒有關閉標籤。
示例
以下示例展示了使用 <br> 標籤建立帶換行按鈕的最簡單方法。
<!DOCTYPE html>
<html>
<head>
<title>How to Create Button with Line Breaks?</title>
<style>
button{
width:75px;
background-color:blueviolet;
border:4px solid lightblue;
color:white;
}
</style>
</head>
<body>
<h3>Button with line breaks</h3>
<button type="button">My<br>First<br>Button</button>
</body>
</html>
使用 word-break 屬性
插入換行的另一種方法是使用 CSS 的word-break 屬性，該屬性指定當單詞到達行尾時如何換行。
語法
word-break: normal|break-all|keep-all|break-word;
Normal: 這是預設值。它遵循常規的換行規則。
Break-all: 它指定可以在任何特定字元處換行，以防止溢位。
Keep-all: 它指定不應為中文、日文和韓文使用換行符。
Break-word: 它指定可以在任意位置換行，以防止任何溢位。
示例
在這個例子中，我們將按鈕文字插入到 <span> 元素中，並使用 word-break 屬性的 "keep-all" 值並設定寬度。
<!DOCTYPE html>
<html>
<head>
<title>How to Create Button with Line Breaks?</title>
<style>
span {
display: block;
width: 20px;
padding:10px 20px;
word-break: keep-all;
text-align: center;
}
</style>
</head>
<body>
<h3>The word-break property</h3>
<button type="button">
<span>This is a button</span>
</button>
</body>
</html>
示例
此示例展示瞭如何在使用 <input> 標籤建立的按鈕中插入換行符。我們將 white-space 屬性設定為 normal，並使用 word-break 屬性的 break-word 值。
<!DOCTYPE html>
<html>
<head>
<title>How to Create Button with Line Breaks?</title>
<style>
input{
display: inline-block;
white-space: normal;
word-wrap: break-word;
width: 110px;
padding: 20px 15px 25px 10px;
margin: 10px;
background-color: darkgrey;
color: white;
border: 4px solid darkslategray;
border-radius: 15px;
text-align: center;
font-size: 20px;
font-family:"CAMBRIA";
}
</style>
</head>
<body>
<h3>The word-break property</h3>
<input type="button" value="Input Button" />
</body>
</html>
使用 flex-wrap 屬性
插入換行的另一種方法是使用flex-wrap 屬性及其“wrap” 值，該值指定彈性專案將在必要時換行。在這種情況下，需要指定按鈕的寬度。
語法
以下是語法
flex-wrap: nowrap|wrap|wrap-reverse;
Nowrap: 這是預設值。它指定彈性專案不會換行。
Wrap: 它指定如果必要，彈性專案將換行。
Wrap-reverse: 它指定如果必要，彈性專案將以相反的順序換行。
示例
下面的示例演示瞭如何使用 flex-wrap 屬性在按鈕中插入換行符。我們使用 flex-wrap 屬性的 wrap 值並將 display 屬性設定為 flex。
<!DOCTYPE html>
<html>
<head>
<title>How to Create Button with Line Breaks?</title>
<style>
button {
display: flex;
flex-wrap: wrap;
width: 75px;
padding:12px;
background-color:cadetblue;
font-weight:550;
}
</style>
</head>
<body>
<h3>The flex-wrap property</h3>
<button type="button">A Demo Button</button>
</body>
</html>
示例
此示例展示瞭如何在使用 <a> 標籤建立的按鈕中新增換行符。它與上面的示例非常相似，因為我們在這裡使用 flex-wrap 屬性的 wrap 值。
<!DOCTYPE html>
<html>
<head>
<title>How to Create Button with Line Breaks?</title>
<style>
.button {
display: flex;
flex-wrap: wrap;
cursor: pointer;
width: 60px;
padding: 10px 20px 20px 15px;
border-radius: 15px;
text-decoration-color: pink;
background-color: palevioletred;
color:lavenderblush;
text-align: center;
}
</style>
</head>
<body>
<h3>The flex-wrap property</h3>
<a class="button" href="https://tutorialspoint.tw/index.htm">Welcome to Tutorials Point</a>
</body>
</html>
3K+ 瀏覽量
