如何创建带换行的按钮?


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

语法

<button type = "button">

除了“type” 属性之外,按钮标签还使用其他属性,例如 autofocus、disabled、form、formaction、formmethod、value 等。

当按钮包含较长的文本时,在创建它时就需要添加换行。下面讨论了几种实现此目的的方法。

使用 <br> 标签

HTML 的 <br> 标签用于在任何文本中插入单个换行符。它是一个空标签,因此没有关闭标签。

示例

以下示例展示了使用 <br> 标签创建带换行按钮的最简单方法。

Open Compiler
<!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" 值并设置宽度。

Open Compiler
<!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 值。

Open Compiler
<!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>

Explore our latest online courses and learn new skills at your own pace. Enroll and become a certified expert to boost your career.

使用 flex-wrap 属性

插入换行的另一种方法是使用flex-wrap 属性及其“wrap” 值,该值指定弹性项目将在必要时换行。在这种情况下,需要指定按钮的宽度。

语法

以下是语法

flex-wrap: nowrap|wrap|wrap-reverse;
  • Nowrap: 这是默认值。它指定弹性项目不会换行。

  • Wrap: 它指定如果必要,弹性项目将换行。

  • Wrap-reverse: 它指定如果必要,弹性项目将以相反的顺序换行。

示例

下面的示例演示了如何使用 flex-wrap 属性在按钮中插入换行符。我们使用 flex-wrap 属性的 wrap 值并将 display 属性设置为 flex。

Open Compiler
<!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 值。

Open Compiler
<!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.com/index.htm">Welcome to Tutorials Point</a> </body> </html>

更新于: 2023年9月11日

3K+ 浏览量

开启你的职业生涯

通过完成课程获得认证

开始学习
广告