如何让同级button元素像普通文本一样自动换行？

你需要将每个音节封装为<button>，同时让这些按钮的换行行为和纯文本、<span>版本完全一致，无需修改HTML结构，仅用CSS即可实现。

修改后的CSS代码 #

body {
    background-color: #222;
    color: #fff;
}

div {
    background-color: #444;
    margin-bottom: .5em;
    padding: 1em;
    width: 180px;
}

div,
button {
    font-family: sans-serif;
    font-size: 20px;
}

button {
    background-color: transparent;
    border: none;
    color: orange;
    margin: 0;
    padding: 0;
    /* 新增核心属性 */
    display: inline;
    line-height: inherit;
    vertical-align: baseline;
}

关键属性说明 #

• display: inline;：将按钮的默认显示类型从inline-block改为行内元素，使其完全遵循普通文本的换行、排版规则，和<span>、纯文本的表现完全对齐。
• line-height: inherit;：继承父容器的行高，避免按钮自身默认行高导致的行间距不一致问题。
• vertical-align: baseline;：确保按钮与其他文本的基线对齐，消除可能出现的垂直偏移。

修改后，<button>版本的换行、排版表现会和前两个示例完全一致，无需调整任何HTML结构。

内容的提问来源于stack exchange，提问作者Robo Robok