为什么在我的 CSS 中可以使用断字、换行或溢出换行？我究竟做错了什么？

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>

这是我的 class:

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

我尝试将 class 添加到按钮本身，并在 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 中可以使用断字、换行或溢出换行？我究竟做错了什么？

Why word-break nor word-wrap nor overflow-wrap are working in my CSS? What am I doing wrong?

css

word-wrap