时间戳

首页 > 解决方案 > 为什么 word-break 或 word-wrap 或 overflow-wrap 在我的 CSS 中工作？我究竟做错了什么？

css - 为什么 word-break 或 word-wrap 或 overflow-wrap 在我的 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 {}

为什么它不起作用？

标签： cssword-wrap

解决方案

添加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>

推荐阅读