Word break isn't working even with width defined

Question

I'm working on Bootstrap 4 and trying to make a horizontal slider. When I hover, a text appears with a white background with some opacity.

The issue is that the text inside is way too large even if the

tag is shorter than the container.

I know that to use word-break CSS property you need to define the width for example, I did try width : 200px but it doesn't work.

I also tried hyphens CSS property, word-wrap CSS property, word-break CSS property, max-width CSS property, overflow-wrap CSS property but nothing seems to work.

Do you know what I did wrong?

/*--------------------------------------------------------------
# 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; }






		  
		    						
							
							
								
									
										Avocat au barreau de Paris depuis 1993

rojadesign · Accepted Answer

Change

white-space: nowrap;

to

white-space: normal; in .employes > .row.

Alternatively, remove it at all.

For more Information, visit MDN - White-space - CSS.

Word break isn't working even with width defined

Answers (1)

Related Questions

Word break isn&#39;t working even with width defined

Answers (1)

Related Questions

Word break isn't working even with width defined