Paul Paul -4 years ago 119
CSS Question

How to hide long text in responsive div?

I am having trouble with this design. I want to hide the excess text that the div can't contain. I've tried using "overflow: hidden" and "word-wrap: break-word" but both don't work. Here's the html and css.



.contents {
text-align: center;
margin-bottom: 15px !important;
}

.instagram {
background-image: url("https://snd-assets.s3.amazonaws.com/icons/flat/instagram.png");
}

.logos.logos-lg {
background-size: 120px auto;
height: 120px;
width: 120px;
}

.logos {
margin: 0 auto 15px;
background-position: 1px 1px;
background-repeat: no-repeat;
display: block;
}

.box_panel {
width: 100%;
height: 132px;
border: 1px solid #ddd;
border-radius: 4px;
-webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .05);
box-shadow: 0 1px 1px rgba(0, 0, 0, .05);
}

.box_icon {
float: left;
background-color: #f5f5f5;
border-right: 1px solid #ddd;
margin: 0px 15px 0px 0px;
border-top-left-radius: 4px;
border-bottom-left-radius: 4px;
}

.box_icon .logos {
margin: 5px auto !important;
}

.box_body {
padding: 15px;
text-align: left;
}

.box_body h4 {
font-weight: bold;
}

<div class="col-lg-4 col-md-6 col-sm-6 col-xs-12 contents">
<div class="box_panel">
<div class="box_icon">
<div class="logos logos-lg instagram"></div>
</div>
<div class="box_body">
<h4>Title</h4>
Some Text long text description goes here in the body of the panel box, just a filler for the real content that will stay here once this goes to live.
</div>
</div>
</div>
<div class="col-lg-4 col-md-6 col-sm-6 col-xs-12 contents">
<div class="box_panel">
<div class="box_icon">
<div class="logos logos-lg instagram"></div>
</div>
<div class="box_body">
<h4>Title</h4>
Some Text long text description goes here in the body of the panel box, just a filler for the real content that will stay here once this goes to live.
</div>
</div>
</div>
<div class="col-lg-4 col-md-6 col-sm-6 col-xs-12 contents">
<div class="box_panel">
<div class="box_icon">
<div class="logos logos-lg instagram"></div>
</div>
<div class="box_body">
<h4>Title</h4>
Some Text long text description goes here in the body of the panel box, just a filler for the real content that will stay here once this goes to live.
</div>
</div>
</div>
<div class="col-lg-4 col-md-6 col-sm-6 col-xs-12 contents">
<div class="box_panel">
<div class="box_icon">
<div class="logos logos-lg instagram"></div>
</div>
<div class="box_body">
<h4>Title</h4>
Some Text long text description goes here in the body of the panel box, just a filler for the real content that will stay here once this goes to live.
</div>
</div>
</div>





Whenever I try to resize the page, specially to the smallest screen size, the text just bleeds out of the div which is not very pretty. I can't set the of the box_body because it's supposed to follow the size of the col-*.

Answer Source

Add overflow: hidden; to .box_panel

.contents {
  text-align: center;
  margin-bottom: 15px !important;
}

.instagram {
  background-image: url("https://snd-assets.s3.amazonaws.com/icons/flat/instagram.png");
}

.logos.logos-lg {
  background-size: 120px auto;
  height: 120px;
  width: 120px;
}

.logos {
  margin: 0 auto 15px;
  background-position: 1px 1px;
  background-repeat: no-repeat;
  display: block;
}

.box_panel {
  width: 100%;
  height: 132px;
  border: 1px solid #ddd;
  border-radius: 4px;
  -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .05);
  box-shadow: 0 1px 1px rgba(0, 0, 0, .05);
  overflow: hidden;
}

.box_icon {
  float: left;
  background-color: #f5f5f5;
  border-right: 1px solid #ddd;
  margin: 0px 15px 0px 0px;
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px;
}

.box_icon .logos {
  margin: 5px auto !important;
}

.box_body {
  padding: 15px;
  text-align: left;
}

.box_body h4 {
  font-weight: bold;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="col-lg-4 col-md-6 col-sm-6 col-xs-12 contents">
    <div class="box_panel">
        <div class="box_icon">
            <div class="logos logos-lg instagram"></div>
        </div>
        <div class="box_body">
            <h4>Title</h4>
            Some Text long text description goes here in the body of the panel box, just a filler for the real content that will stay here once this goes to live.
        </div>
    </div>
</div>
<div class="col-lg-4 col-md-6 col-sm-6 col-xs-12 contents">
    <div class="box_panel">
        <div class="box_icon">
            <div class="logos logos-lg instagram"></div>
        </div>
        <div class="box_body">
            <h4>Title</h4>
            Some Text long text description goes here in the body of the panel box, just a filler for the real content that will stay here once this goes to live.
        </div>
    </div>
</div>
<div class="col-lg-4 col-md-6 col-sm-6 col-xs-12 contents">
    <div class="box_panel">
        <div class="box_icon">
            <div class="logos logos-lg instagram"></div>
        </div>
        <div class="box_body">
            <h4>Title</h4>
            Some Text long text description goes here in the body of the panel box, just a filler for the real content that will stay here once this goes to live.
        </div>
    </div>
</div>
<div class="col-lg-4 col-md-6 col-sm-6 col-xs-12 contents">
    <div class="box_panel">
        <div class="box_icon">
            <div class="logos logos-lg instagram"></div>
        </div>
        <div class="box_body">
            <h4>Title</h4>
            Some Text long text description goes here in the body of the panel box, just a filler for the real content that will stay here once this goes to live.
        </div>
    </div>
</div>

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download