我正在使用Bootstrap 4并尝试制作水平滑块。当我将鼠标悬停时，会出现带有白色背景的文本，但有些不透明。
问题在于，即使
标签比容器短，里面的文本也太大了。
我知道要使用断字CSS属性，例如，您需要定义width，我确实尝试过width : 200px，但它不起作用。
我还尝试了hyphens CSS属性，word-wrap CSS属性，word-break CSS属性，max-width CSS属性，overflow-wrap CSS属性，但是似乎没有任何作用
你知道我做错了吗？
/*--------------------------------------------------------------
# Slider (Equipe)
--------------------------------------------------------------*/
.employes {
-webkit-transform: rotateX(180deg);
transform: rotateX(180deg); }
.employes > .row {
overflow-x: auto;
white-space: nowrap; }
.employes > .row > .employes_container {
display: inline-block;
float: none;
-webkit-transform: rotateX(180deg);
transform: rotateX(180deg); }
.employes > .row > .employes_container .img-content {
-webkit-transform: skew(-20deg);
-moz-transform: skew(-20deg);
-o-transform: skew(-20deg);
tranform: skew(-20deg); }
.employes > .row > .employes_container .img-content:hover {
cursor: pointer; }
.employes > .row > .employes_container .img-content:hover .content {
background-color: rgba(255, 255, 255, 0.4);
opacity: 1; }
.employes > .row > .employes_container .img-content .content {
opacity: 0;
-webkit-transition: all .5 ease-in-out;
transition: all .5 ease-in-out;
font-family: 'Lato', sans-serif; }
.employes > .row > .employes_container .img-content .content .description {
-webkit-transform: skew(20deg);
-moz-transform: skew(20deg);
-o-transform: skew(20deg);
tranform: skew(20deg); }
.employes > .row::-webkit-scrollbar {
width: 12px; }
.employes > .row::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
border-radius: 10px; }
.employes > .row::-webkit-scrollbar-thumb {
border-radius: 10px;
background: rgba(255, 0, 0, 0.8);
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.5); }
.employes > .row::-webkit-scrollbar-thumb:window-inactive {
background: rgba(255, 0, 0, 0.4); }
.employes > .row::-webkit-scrollbar-button {
width: 350px; }
.employes .caption-link {
position: absolute;
bottom: 0;
left: calc(50% - 100px);
text-align: center;
width: 200px;
font-family: 'Lato', sans-serif; }
.employes .caption-link > div {
padding: 10px 25px;
background-color: #1C3B65; }
.employes .caption-link > div p {
margin-bottom: 0;
text-transform: uppercase;
color: #FFF; }<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid employes">
<div class="row text-center flex-nowrap">
<div class="col-md-2 col-sm-4 col-xs-8 employes_container mx-5 p-0">
<!-- <div class="img-content py-5" style="background:url('') no-repeat center center; background-size: cover;"> -->
<div class="img-content" style="background:url('https://picsum.photos/200/300?image=0') no-repeat center center; background-size: cover;">
<div class="content px-3 py-5">
<div class="description" style="
">
<p>Avocat au barreau de Paris depuis 1993</p>
</div>
</div>
</div>
</div>
<div class="col-md-2 col-sm-4 col-xs-8 p-0 mx-5 employes_container">
<!-- <div class="img-content py-5" style="background:url('') no-repeat center center; background-size: cover;"> -->
<div class="img-content" style="background:url('https://picsum.photos/200/300?image=0') no-repeat center center; background-size: cover;">
<div class="content px-3 py-5">
<div class="description">
</div>
</div>
</div>
</div>
<div class="col-md-2 col-sm-4 col-xs-8 p-0 mx-5 employes_container">
<!-- <div class="img-content py-5" style="background:url('') no-repeat center center; background-size: cover;"> -->
<div class="img-content" style="background:url('https://picsum.photos/200/300?image=0') no-repeat center center; background-size: cover;">
<div class="content px-3 py-5">
<div class="description">
</div>
</div>
</div>
</div>
<div class="col-md-2 col-sm-4 col-xs-8 p-0 mx-5 employes_container">
<!-- <div class="img-content py-5" style="background:url('') no-repeat center center; background-size: cover;"> -->
<div class="img-content" style="background:url('https://picsum.photos/200/300?image=0') no-repeat center center; background-size: cover;">
<div class="content px-3 py-5">
<div class="description">
</div>
</div>
</div>
</div>
<div class="col-md-2 col-sm-4 col-xs-8 p-0 mx-5 employes_container">
<!-- <div class="img-content py-5" style="background:url('') no-repeat center center; background-size: cover;"> -->
<div class="img-content" style="background:url('https://picsum.photos/200/300?image=0') no-repeat center center; background-size: cover;">
<div class="content px-3 py-5">
<div class="description">
</div>
</div>
</div>
</div>
<div class="col-md-2 col-sm-4 col-xs-8 p-0 mx-5 employes_container">
<!-- <div class="img-content py-5" style="background:url('') no-repeat center center; background-size: cover;"> -->
<div class="img-content" style="background:url('https://picsum.photos/200/300?image=0') no-repeat center center; background-size: cover;">
<div class="content px-3 py-5">
<div class="description">
</div>
</div>
</div>
</div>
<div class="col-md-2 col-sm-4 col-xs-8 p-0 mx-5 employes_container">
<!-- <div class="img-content py-5" style="background:url('') no-repeat center center; background-size: cover;"> -->
<div class="img-content" style="background:url('https://picsum.photos/200/300?image=0') no-repeat center center; background-size: cover;">
<div class="content px-3 py-5">
<div class="description">
</div>
</div>
</div>
</div>
<div class="col-md-2 col-sm-4 col-xs-8 p-0 mx-5 employes_container">
<!-- <div class="img-content py-5" style="background:url('') no-repeat center center; background-size: cover;"> -->
<div class="img-content" style="background:url('https://picsum.photos/200/300?image=0') no-repeat center center; background-size: cover;">
<div class="content px-3 py-5">
<div class="description">
</div>
</div>
</div>
</div>
<div class="col-md-2 col-sm-4 col-xs-8 p-0 mx-5 employes_container">
<!-- <div class="img-content py-5" style="background:url('') no-repeat center center; background-size: cover;"> -->
<div class="img-content" style="background:url('https://picsum.photos/200/300?image=0') no-repeat center center; background-size: cover;">
<div class="content px-3 py-5">
<div class="description">
</div>
</div>
</div>
</div>
<div class="col-md-2 col-sm-4 col-xs-8 p-0 mx-5 employes_container">
<!-- <div class="img-content py-5" style="background:url('') no-repeat center center; background-size: cover;"> -->
<div class="img-content" style="background:url('https://picsum.photos/200/300?image=0') no-repeat center center; background-size: cover;">
<div class="content px-3 py-5">
<div class="description">
</div>
</div>
</div>
</div>
<div class="col-md-2 col-sm-4 col-xs-8 p-0 mx-5 employes_container">
<!-- <div class="img-content py-5" style="background:url('') no-repeat center center; background-size: cover;"> -->
<div class="img-content" style="background:url('https://picsum.photos/200/300?image=0') no-repeat center center; background-size: cover;">
<div class="content px-3 py-5">
<div class="description">
</div>
</div>
</div>
</div>
<div class="col-md-2 col-sm-4 col-xs-8 p-0 mx-5 employes_container">
<!-- <div class="img-content py-5" style="background:url('') no-repeat center center; background-size: cover;"> -->
<div class="img-content" style="background:url('https://picsum.photos/200/300?image=0') no-repeat center center; background-size: cover;">
<div class="content px-3 py-5">
<div class="description">
</div>
</div>
</div>
</div>
<div class="col-md-2 col-sm-4 col-xs-8 p-0 mx-5 employes_container">
<!-- <div class="img-content py-5" style="background:url('') no-repeat center center; background-size: cover;"> -->
<div class="img-content" style="background:url('https://picsum.photos/200/300?image=0') no-repeat center center; background-size: cover;">
<div class="content px-3 py-5">
<div class="description">
</div>
</div>
</div>
</div>
<div class="col-md-2 col-sm-4 col-xs-8 p-0 mx-5 employes_container">
<!-- <div class="img-content py-5" style="background:url('') no-repeat center center; background-size: cover;"> -->
<div class="img-content" style="background:url('https://picsum.photos/200/300?image=0') no-repeat center center; background-size: cover;">
<div class="content px-3 py-5">
<div class="description">
</div>
</div>
</div>
</div>
<div class="col-md-2 col-sm-4 col-xs-8 p-0 mx-5 employes_container">
<!-- <div class="img-content py-5" style="background:url('') no-repeat center center; background-size: cover;"> -->
<div class="img-content" style="background:url('https://picsum.photos/200/300?image=0') no-repeat center center; background-size: cover;">
<div class="content px-3 py-5">
<div class="description">
</div>
</div>
</div>
</div>
</div>
</div>
答案 0 :(得分：1)
更改
white-space: nowrap;
到
white-space: normal; in .employes > .row。
或者，将其完全删除。
有关更多信息，请访问MDN - White-space - CSS。