如何设置锚点按钮宽度并实现内部文本自动换行？

嘿，我来帮你搞定这个按钮文本换行的需求！你已经给按钮加了.module类设置宽度，但文本还是不换行，这是因为Bootstrap的.btn默认带有white-space: nowrap样式，强制文本不换行。我们只需要修改这个样式就能实现自动换行啦。

解决方案 #

给你的.module类添加white-space: normal属性，同时可以根据需要调整文本对齐方式（比如text-align: left），这样文本就会根据你设置的宽度自动折行了。

完整代码示例 #

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<style>
.module {
  width: 100px;
  white-space: normal; /* 关键：取消强制不换行 */
  text-align: left; /* 可选：调整文本对齐方式，默认是居中 */
}
</style>
<div class="btn-group">
  <a class="btn btn-default module">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren</a>
  <a class="btn btn-default module">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren</a>
  <a class="btn btn-default module">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren</a>
  <a class="btn btn-default module">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren</a>
</div>

原理说明 #

• white-space: normal：恢复文本的默认换行行为，当内容超出容器宽度时自动换行
• 保留你设置的width: 100px，固定按钮宽度，文本会在这个宽度内折行
• 可选的text-align: left：如果不喜欢默认的居中对齐，可以改成左对齐，让文本排版更自然

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