如何在由框架创建的<input>标签中不截断地显示文本

Question

我使用的是Angular Material，其中有一个具有自动补全字段的表单，为此，我使用了md-autocomplete，它使用了

<input type = "text" />

在内部呈现文本字段。我对此有一个问题。只要文本比字段的宽度长，我就希望它换行，这样它就不会被截断，并显示在下一行中。

但是对于<input>，没有办法设置样式，这样溢出的文本就会显示在下一行(我知道md-autocomplete区域符合我的要求，但input使用的是textarea )。

因此，问题是如何才能在不截断的情况下显示文本。任何建议都行。请帮帮我！

Answer 1

从文档link

用户更改时激发

• md-search-text-change表达式当用户选择项目

时激发text

• md-selected-item-change表达式

我的建议是让你的md-autocomplete通过CSS隐藏起来，并挂钩这些表达式来更新用户将看到和交互的文本区。

抱歉，目前没有可用的代码。但如果你想的话我可以做个柱塞。我已经为ui-autocomplete构建了类似的。两个输入一个ng-model="data.uiModel和ng-model=data.actualModel"

Answer 2

我不认为使用输入type="text“是可能的，但作为变通方法，您可以在输入中使用标题属性，并具有与值相同的内容。例如

<input type="text" title="something that exceeds the width of the box" value="something that exceeds the width of the box">

这将确保您的内容将在悬停时完全可见。

Answer 3

使用input元素截断文本是不可能的，但是可以做另一件事来提供一个textarea元素并将其定位在输入字段的顶部。

类似于下面的内容：

HTML: <div class="container-text"> <input type="text" id="myText" /> </div>

Javascript

(function(){if(document.querySelector('#myText')){
var elm = document.createElement('textarea');
elm.className = 'myTextArea';
document.querySelector('.container-text').appendChild(elm);
document.querySelector('#myText').addEventListener('keyup', textChangeUpdate)}
function textChangeUpdate(){
   document.querySelector('.myTextArea').value = document.querySelector('#myText').value;
   document.querySelector('.myTextArea').focus();
}}());

CSS

.container-text{
    position:relative;
}
.container-text input, .container-text textarea{
    position:absolute;
    top: 0;
    left:0;
    height:40px;
    width:130px;
    z-index:99;
}
.container-text input{
   z-index:100;
    opacity:0;
}

https://jsfiddle.net/5ysfbo3a/

您需要修改CSS带来的维度和外观和感觉，根据您的网站需要。

注意:确保两个元素的尺寸相同，这样您就可以看到md-autocomplete元素出现在可见文本区域的下面。

希望这能有所帮助。

干杯，阿肖克