为什么分词、换行和溢出换行在我的CSS中工作我做错什么了?

我有一个带用户名的按钮。我在用引导程序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 {}

为什么不起作用?