我有一个包含用户名的按钮。我使用的是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 {}
为什么它不起作用?
发布于 2018-07-22 05:09:32
将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>
https://stackoverflow.com/questions/51460001
复制相似问题