Aswin Kumar Aswin Kumar - 5 months ago 13
CSS Question

Text overflowing beyond the div

Text overflowing beyond the DIV while scrolling



How can prevent the text from exceeding the DIV box while scrolling?
What are the changes that I need to change?



.trending {
width: 50%;
float: left;
padding-top: 6px;
}
.trending-box {
margin-left: 5px;
background-color: #e9ebee;
color: #4b4f56;
}
.trending-box h3 {
text-align: center;
padding: 3px 3px 3px 3px;
}
.trending-align {
background-color: palegreen;
padding: 3px 3px 3px 3px;
}
.trending-content {
background-color: #111;
width: 100%;
}

<div class="trending">
<div class="trending-box">
<h3>Top Trending</h3>
<div class="trending-align">
<div class="trending-content">
Some random text
</div>
</div>


</div>
</div>




Answer

I don't get what you mean by scroll But possibly you mean to extra wrap the text inside the div , here the solution for that just include
word-wrap: break-word;

.trending {
	  width: 50%;
	  float: left;
	  padding-top: 6px;
	}
	.trending-box {
	  margin-left: 5px;
	  background-color: #e9ebee;
	  color: #4b4f56;
	}
	.trending-box h3 {
	  text-align: center;
	  padding: 3px 3px 3px 3px;
	}
	.trending-align {
	  background-color: palegreen;
	  padding: 3px 3px 3px 3px;
	}
	.trending-content {
 word-wrap: break-word;                     //here 
	  background-color: #111;
	  width: 100%;
	}
<div class="trending">
  <div class="trending-box">
    <h3>Top Trending</h3>
    <div class="trending-align">
      <div class="trending-content">
        Some random textdddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd
      </div>
    </div>


  </div>
</div>