超出div的文本溢出

Question

滚动

时超出DIV的文本

滚动时如何防止文本超出DIV框？ 我需要改变哪些变化？

    // This will correct the behavior and keep the page focused.
    <li><a data-target="#" data-value="something else here">Something else here</a></li>

    // This will cause the page to jump
    <li><a href="#" data-value="separated link">Separated link</a></li>

	.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%;
	}
	

Answer 1

    
    
    .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: 200px;
    height: 100px;
    overflow: scroll;
	}

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

您可以使用 CSS溢出属性

overflow: scroll;

试试这个 - http://jsfiddle.net/MadhawaMB/rJy94/41/

.trending-content {

    background-color:  #111;
    width: 200px;
    height: 100px;
    overflow: scroll;
    }

Answer 2

我不能通过滚动来理解你的意思 但可能你的意思是在div中额外包装文本 ，这是解决方案 只包括
 自动换行：break-word;

＆＃13;

＆＃13;

.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%;
	}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;