Question

我有一个带有下拉菜单的引导程序模式。但是，下拉菜单中的文本长度会有所不同。现在如果屏幕很窄（移动），那么部分文字就会丢失。我很好奇是否有可能使文字响应。这样就删除了文本的最后一部分。如果无法做到这一点，那么在文本无法完全阅读的情况下，是否可以在底部可视化垂直滑块？

在此example中，我创建了一个模型，其中显示了下拉菜单。在下拉菜单中将文本加长。

HTML

<html class="no-js">


  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="description" content="">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.1/css/bootstrap-select.css" />

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.bundle.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.1/js/bootstrap-select.min.js"></script>

  </head>

  <body>
    <!-- Button trigger modal -->
    <a class="btn color_orange_gradient" id="button" href="#" data-toggle="modal" data-target="#basicModal">
                    <i class="fas fa-sliders-h fa-lg"> Modal</i></a>

    <!-- Modal -->
    <div class="modal fade" id="basicModal" tabindex="-1" role="dialog" aria-labelledby="basicModal" aria-hidden="true">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header color_orange_gradient text-center">
            <h4 class="modal-title w-100 text-white" id="myModalLabel">Some data</h4>
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">×</span>
        </button>
          </div>
          <div class="modal-body">
            <div class="extra-controls" id="debug">
              Dropdown menu
            </div>
            <select class="selectpicker" multiple data-live-search="true">
  <option>Very long text needs to be shorten when in mobile view</option>
  <option>Very long text needs to be shorten when in mobile view</option>
  <option>Very long text needs to be shorten when in mobile view</option>
</select>
          </div>
        </div>
      </div>
    </div>


  </body>

</html>

CSS

#shadow:hover {
  box-shadow: 0 5px 11px 0 rgba(0, 0, 0, 0.18), 0 4px 15px 0 rgba(0, 0, 0, 0.15);
}

.color_orange_gradient {
  background: #f46b45;
  /* fallback for old browsers */
  background: -webkit-linear-gradient(to right, #eea849, #f46b45);
  /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(to right, #eea849, #f46b45);
  /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}

.color_orange {
  background: #f46b45;
  /* fallback for old browsers */
}

.color_orange:hover {
  background-color: #f7977c !important;
}

希望有人知道一种使文本可读的解决方案。

Answer 1

尝试将其添加到您的CSS工作表中：

.dropdown-item{
  white-space : nowrap;
}
.dropdown-item .text {
  word-wrap:break-word;
}
.dropdown-menu.show{
  min-width:100%!important;
  width:100%!important;
}

具有下拉菜单响应文本的引导模式

1 个答案: