HTML 如何创建带有换行的按钮

HTML <button>元素是一个交互元素，用户可以通过鼠标点击或键盘快捷键来激活它。一旦激活，它会执行一个可编程的动作，例如提交表单或打开对话框。通常使用HTML中的<button>，<input>或<a>标签来创建按钮。

语法

<button type = "button">

除了‘type’属性外，button标签还使用其他属性，如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.tutorialspoint.com/index.htm">Welcome to Tutorials Point</a>
  </body>
</html>