Bootstrap 3中list-group-item文本换行后被裁剪的解决方法咨询

你的问题大概率是浮动元素（pull-right）和RTL（从右到左）文本排版的组合导致的，再加上父元素没正确清除浮动，使得文本换行时被挤压甚至裁剪。这里给你几个实用的解决办法：

方法1：添加clearfix清除浮动 #

Bootstrap的pull-right会让元素浮动，父元素如果不清除浮动，容易出现高度计算异常，间接导致文本被裁剪。给你的list-group-item加上clearfix类，确保它能正确包裹所有子元素：

<div class="list-group-item getItemActivityHistory clearfix" item_id="6">
  <div class="text-info">
    <b>חשמל</b>
    <span class="pull-right">נוצל החודש: <span> 666 </span></span>
  </div>
  <div>
    יתרת תקציב: <span class="leftToRight">לא הוגדר</span>
    <span class="pull-right"> התחייבויות עתידיות: 100 </span>
  </div>
</div>

方法2：改用文本对齐替代浮动（更适配RTL场景） #

因为你用的是希伯来语（RTL排版方向），pull-right的浮动行为可能和预期不符。可以把pull-right换成text-right，同时拆分左右文本块，让排版更稳定：

<div class="list-group-item getItemActivityHistory" item_id="6">
  <div class="text-info clearfix">
    <div class="pull-left">
      <b>חשמל</b>
    </div>
    <div class="text-right">
      נוצל החודש: <span> 666 </span>
    </div>
  </div>
  <div class="clearfix">
    <div class="pull-left">
      יתרת תקציב: <span class="leftToRight">לא הוגדר</span>
    </div>
    <div class="text-right">
      התחייבויות עתידיות: 100
    </div>
  </div>
</div>

拆分后左右文本块各自独立，换行时会在自己的区域内正常显示，不会被挤压裁剪。

方法3：自定义内边距和行高 #

如果是容器内边距或行高不足导致文本被裁剪，可以添加自定义CSS调整：

.getItemActivityHistory {
  padding: 12px 15px; /* 比默认padding稍大，给文本留出空间 */
  line-height: 1.6; /* 增加行高，让换行文本不会拥挤 */
}

问题根源说明 #

Bootstrap 3的pull-right是浮动元素，当父元素未清除浮动时，容器高度可能无法正确包裹所有内容；再加上RTL文本的排版方向，浮动元素会挤压文本的换行空间，最终导致第二行文本被容器裁剪。清除浮动或改用文本对齐的方式，能让布局更适配RTL场景，避免裁剪问题。

内容的提问来源于stack exchange，提问作者Noam B.