Jquery 自动完成为 1 项显示 2 行而不是将其截断

Question

我正在尝试使用 jQuery UI 的自动完成功能来显示数组中的一堆字符串，但其中一些字符串很长，因为它们的那一部分不在屏幕上.

现在我的问题是如何做到这一点，当我的一个字符串太长时，它不会离开屏幕，而是继续在不同的线上。

我试过在网上搜索一下，但我很难用正确的措辞来解决我的问题。

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

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

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

所以要指定我想要的字符串是否太长而无法在屏幕上显示以占用 2 行而不是 1 行截断以便整个字符串可读。

Answer 1

您可以在 css 文件中尝试

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

Answer 2

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

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

请参阅 MDN 中对 white-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>

Jquery 自动完成为 1 项显示 2 行而不是将其截断

Jquery Autocomplete show 2 lines for 1 item instead of cutting it off

html

jquery

jquery-ui-autocomplete