时间戳

首页 > 解决方案 > List looks odd when text is too long

html - List looks odd when text is too long

问题描述

I want a list with scrollbars, but when the content is too long, it doesn't look good:

enter image description here

I want it to look like this:

+----------------------------------------------------+
| aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa  Trashcan|
+----------------------------------------------------+

Here is my HTML code:

<div class="col-md-7 col-sm-7 col-xs-12">
  <div>
    <div style="height: 75px;padding-bottom:0px; padding-top:0px; overflow: auto; border: 1px solid #ccc;" id="excludedDomains">
      <ul class="list-group">
        <li class="list-group-item">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa<i style="position:relative; float:right;" class="fa fa-trash-o btn btn-danger btn-xs"></i>
        </li>
        <li class="list-group-item">
          some text
        </li>
      </ul>
    </div>
  </div>
</div>

标签： htmlcssbootstrap-4

解决方案

When your text doesn't fit in your div, use word-wrap: break-word; in your CSS.

.list-group-item {
  word-wrap: break-word;
}
<div class="col-md-7 col-sm-7 col-xs-12">
  <div>
    <div style="height: 75px;padding-bottom:0px; padding-top:0px; overflow: auto; border: 1px solid #ccc;" id="excludedDomains">
      <ul class="list-group">
        <li class="list-group-item">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa<i style="position:relative; float:right;" class="fa fa-trash-o btn btn-danger btn-xs"></i>
        </li>
        <li class="list-group-item">
          some text
        </li>
      </ul>
    </div>
  </div>
</div>

推荐阅读