垂直滚动不是不包装文本

Question

＆＃13;

＆＃13;

.bob-vertical-scroll {
  overflow-y:auto;
  width: 16px;
  height: 130px;
}
.table-for-first-offer1 {
  width: 232px;
  height: 145px;
  float:left;
  padding-right:4px;
  overflow-x: hidden;
}

＆＃13;

<div class="table-for-first-offer1 bob-vertical-scroll">
  <div id="bob-r3-highlights1">
    <p class="bob-prd-highlights-content">produ1</p>
    <span><hr class="bob-hr"></span>
  </div>
  <div id="bob-r3-highlights2">
    <p class="bob-prd-highlights-content">produ2</p>
    <span><hr class="bob-hr"></span>
  </div>
  <div id="bob-r3-highlights3">
    <p class="bob-prd-highlights-content">A login is a security principal, or an entity that can be authenticated by a secure system. Users need a login to connect to SQL Server. You can create a login based on a Windows principal (such as a domain user or a Windows domain group) or you can create a login that is not based on a Windows principal (such as an SQL Server login).</p>						
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

我有一个html页面，其长文本应该包含在div内但不包含。

我尝试使用填充，但仍然无法看到单词中的所有字母。

e.g。只有＆＃34; ca＆＃34;在单词＆＃34; can＆＃34;中可见。请看下面的截图

我该如何解决这个问题？ 我为ref：

添加了一张图片

注意：由于某种原因，它在jsFiddle上看起来更好