如何创建带换行符的按钮?
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://www.cainiaomax.com/index.htm">Welcome to Tutorials Point</a>
</body>
</html>
相关文章
有用资源
html 参考教程 - 该教程包含有关 html 的更多信息:https://www.cainiaomax.com/html/
