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

【问题标题】：Jquery Autocomplete show 2 lines for 1 item instead of cutting it offJquery Autocomplete 为 1 个项目显示 2 行而不是将其切断
【发布时间】：2019-11-23 23:23:07
【问题描述】：

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

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

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

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

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

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

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

【问题讨论】：

标签： jquery html jquery-ui-autocomplete

【解决方案1】：

Marcos 很接近，但您需要将 white-space: pre-wrap; 到 .ui-menu .ui-menu-item-wrapper 添加到您的 CSS 中，如下所示。运行代码 sn-p 的演示时，键入字母“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>

【讨论】：

【解决方案2】：

你可以在你的css文件中尝试

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

【讨论】：

网站不在线
我需要查看生成的 div 以正确应用 CSS，如果您上传到 ftp 文件我可以帮助您