Question

我有一个带有用户名的按钮。我正在使用Bootstrap 4。

以防万一，如果长度过长，我想中断名称。我不希望按钮变得大于特定大小。

这是我的按钮：

<div class="romperNombre">
<li class="navbar-item dropdown">
<button class="btn btn-sm btn-light" type="button">
<strong>MariaJuanaJuliaMartinezCorreaFernandez</strong>
</button>
</li>
</div>

我不知道这个名字。即使我使用

<strong>Maria Juana Julia Martinez Correa Fernandez</strong>

代替

<strong>MariaJuanaJuliaMartinezCorreaFernandez</strong>

这是我的课程：

.romperNombre {
  overflow-wrap: break-word;
  word-wrap: break-word;
  word-break: break-all;
  hyphens:auto;
  max-width:100px;
}

我尝试将类添加到按钮本身，并使用CSS进行操作：

.romperNombre button {
  overflow-wrap: break-word;
  word-wrap: break-word;
  word-break: break-all;
  hyphens:auto;
  max-width:100px;
}

我也尝试过button .romperNombre {}

为什么不起作用？

Answer 1

将white-space: normal添加到您的按钮：

.romperNombre button {
  white-space: normal;
  
  word-break: break-all;
  hyphens: auto;
  max-width: 100px;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>


<div class="romperNombre">
  <li class="navbar-item dropdown">
    <button class="btn btn-sm btn-light" type="button">
<strong>MariaJuanaJuliaMartinezCorreaFernandez</strong>
</button>
  </li>
</div>

为什么CSS中不支持断字，不自动换行或不自动换行？我究竟做错了什么？

1 个答案: