带有下拉菜单响应文本的引导模式答案

【问题标题】：Bootstrap modal with drowdown menu responsive text带有下拉菜单响应文本的引导模式
【发布时间】：2019-07-18 18:41:21
【问题描述】：

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

在这个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;
}

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

【问题讨论】：

标签： jquery css twitter-bootstrap mobile drop-down-menu

【解决方案1】：

尝试将此添加到您的 CSS 表中：

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

【讨论】：

您好 Hernandez，感谢您的回复！我现在确实得到了一个水平滚动条，但现在复选标记落在文本上方而不是文本末尾。您碰巧知道解决方案吗？我在这里用您的代码修改了上面的示例：jsfiddle.net/Pension007/y9bq1Lcw
你需要坚持使用那个 CSS，你会完成你的黄金 bruh！?