Question

我想要一个带有滚动条的列表，但是当内容太长时，它看起来并不好：

我希望它看起来像这样：

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

这是我的HTML代码：

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

Answer 1

如果您的文本不适合div，请在CSS中使用word-wrap: break-word;。

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

Answer 2

您应该删除height属性或将其设置为auto才能删除垂直滚动条。

要删除水平滚动条，可以设置scrollbar-width: thin;，或使用none完全删除滚动条。

您应该在overflow-x上使用li属性。

Answer 3

将d-flex更改为span，然后使用text-truncate将文本包装在<ul class="list-group"> <li class="list-group-item d-flex"><span class="text-truncate">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</span><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>中：

@Override
    protected void onActivityResult(int requestCode, int resultCode, Intent data) {
        super.onActivityResult(requestCode, resultCode, data);

        if (resultCode == RESULT_OK)
        {
            if(requestCode == REQUEST_GALLERY)
            {
                Uri dataimage = data.getData();
                String[] imageprojection = {MediaStore.Images.Media.DATA};
                Cursor cursor = getContentResolver().query(dataimage,imageprojection,null,null,null);

                if (cursor != null)
                {
                    cursor.moveToFirst();
                    int indexImage = cursor.getColumnIndex(imageprojection[0]);
                    part_image = cursor.getString(indexImage);

                    Toast.makeText(this, "Image Saved Part Image :" + part_image, Toast.LENGTH_SHORT).show();

                    if(part_image != null)
                    {
                        File image = new File(part_image);
                        imgHolder.setImageBitmap(BitmapFactory.decodeFile(image.getAbsolutePath()));
                        Toast.makeText(this, "Image Saved Part Image :" + image, Toast.LENGTH_SHORT).show();
                    }
                }
            }
        }
    }

https://codeply.com/p/oTEgLYk2Vv

文字过长时列表看起来很奇怪

3 个答案: