时间戳

首页 > 解决方案 > Jquery Autocomplete 为 1 个项目显示 2 行而不是将其切断

jquery - Jquery Autocomplete 为 1 个项目显示 2 行而不是将其切断

问题描述

我正在尝试使用 jQuery UI 的自动完成功能来显示数组中的一堆字符串，但是其中一些字符串很长，因此其中一部分会离开屏幕。

现在我的问题是如何做到这一点，以便当我的一根弦太长时，它不会离开屏幕，而是继续在另一条线上。

我尝试在网上搜索了一下，但我很难正确措辞，也找不到任何解决我问题的方法。

我的自动完成代码非常简单：

JS
$("#myInput").autocomplete({
    minLength: 1,
    source: arrayOfStrings
});

HTML
<div class="ui-widget">
    <input type="text" id="myInput"/>
</div>

因此，要指定我想要一个字符串是否太长而无法在屏幕上占用 2 行而不是 1 行，以便整个字符串可读。

标签： jqueryhtmljquery-ui-autocomplete

解决方案

Marcos 很接近，但您需要将 to 添加white-space: pre-wrap;到.ui-menu .ui-menu-item-wrapper您的 CSS 中，如下所示。运行代码片段的演示时，键入字母“t”作为工作示例。

.ui-menu .ui-menu-item-wrapper {
    white-space: pre-wrap;
}

请参阅MDNwhite-space: pre-wrap上的说明。

$( function() {
    var arrayOfStrings = [
        "This is a string",
        "This is another string",
        "This is a long string that should word wrap",
        "This is yet another that is long enough to word wrap",
        "This is a short string",
        "This is the last string"
    ];
    $("#myInput").autocomplete({
        minLength: 1,
        source: arrayOfStrings
    });
});
.ui-menu .ui-menu-item-wrapper {
    white-space: pre-wrap;
}

.ui-widget.ui-widget-content {
    width: 50px;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css" />
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<div class="ui-widget">
    <input type="text" id="myInput"/>
</div>

推荐阅读