CODEWITHSUNDEEP
javascripthtmlcss
Ara Malki
Ara Malki

Reputation: 185

How to make text not to break outside the div

The html card looks like this:

<li class="col-md-4">
  <div class="categorylist-item">
    <a class="cid-201728169" href="xxxxxxxx">
      <h4>Backoffice</h4>
      <div class="linebreak"></div>
      <p class="description">Ordrar, leveranser, inventering, kampanjer, bokföring m.m.</p> 
      <!--<p class="readmore">Läs mer</p>-->
    </a>
  </div>
</li>

.container.home .categorylist-item h4 {
  font-size: 25px;
    font-weight: bold;
  margin-bottom: 20px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.container.home .categorylist-item .description {
  display: none;
  font-size: 18px;
  font-weight:400;
  margin-top:15px;
}

.container.home .categorylist-item:hover .description {
  display: block;
}

.container.home .categorylist-item .readmore {
  font-size: 16px;
    font-weight: 500;
  color: #212529;
  display:none;
}

.container.home .categorylist-item:hover .readmore {
  display:block;
}

.container.home .categorylist-item .readmore:after {
  content: " \00bb";
}

/*Columns on startpage transitions*/

.categorylist-item .cid-201728169 { /*First column transition*/
    -moz-transform: translateY(100%);
    -webkit-transform: translateY(100%);
    -ms-transform: translateY(100%);
    transform: translateY(100%);
  transition: .5s;
}

.categorylist-item:hover .cid-201728169,/*First column transition*/
.categorylist-item .cid-201728169 {
    -moz-transform: translateY(0);
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
}

Dont bother to run it...

A simple visualisation of it:

This is when you don't hover the card:

enter image description here

When you hover the card:

enter image description here

The problem is:

enter image description here

The p tag (description) goes outside of the box.

How do I make the text not to break outside the div..?

Any ideas?

Upvotes: 2

Views: 730

Answers (1)

Arjunlal
Arjunlal

Reputation: 154

To answer your question 'How do I make the text not to break outside the div', you can set overflow : hidden on the container for the description. That will prevent text from going outside the container. This will cause the element to overflow when bounds are being violated and stay hidden under its bounding boxes. No scroll bar will be shown even if its beyond bounds, but the content will be scrollable.

This will not be an ideal solution though. The description will get hidden, fully or partially, if it crosses bounds and the user might not know to scroll on top of it to read it.

Best solution for you would be adjust the elements' size/margin/padding so that there is enough space for the description.

Upvotes: 2

Related Questions