为什么断字、换行或溢出换行在我的CSS中都能正常工作？我做错了什么？
为什么断字、换行或溢出换行在我的CSS中都能正常工作？我做错了什么？
提问于 2018-07-22 04:50:16
我有一个包含用户名的按钮。我使用的是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 {}
为什么它不起作用？
回答 1
Stack Overflow用户
回答已采纳
发布于 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>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/51460001
复制相关文章
相似问题