我正在使用Angular Material，其中有一个表单具有自动完成字段，我正在使用md-autocomplete来处理它。
<input type = "text" />
在内部呈现文本字段时，我遇到了问题。每当文本长度超过字段宽度时，我希望它能自动换行，以便不被截断，并显示在下一行。
但是，使用<input>时，没有办法使溢出文本在下一行显示（我知道textarea符合我的要求，但md-autocomplete使用input）。
因此问题是如何显示文本而不会被截断。任何建议都可以。请帮忙！
来自文档链接：
md-search-text-change表达式在用户更改文本时触发md-selected-item-change表达式在用户选择项目时触发我的建议是通过CSS隐藏您的md-autocomplete，并将这些表达式挂钩到更新用户将看到和交互的文本区域中。
抱歉目前没有可工作的代码。但如果您想要，我可以创建一个Plunker。我已经为ui-autocomplete构建了类似的东西。有两个输入框，一个带有ng-model =“data.uiModel”，另一个带有ng-model = data.actualModel
<input type="text" title="something that exceeds the width of the box" value="something that exceeds the width of the box">
这将确保您的内容在悬停时完全可见。
输入元素本身无法截断文本，但可以通过提供一个文本区域元素并将其定位在输入字段上方来完成另一件事情。
类似于这样的东西：
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元素出现在可见文本区域下方。
希望这能帮到您。
祝好， Ashok
http://jsfiddle.net/HB7LU/20128/
这里有一个 CodePen，展示了它与md-autocomplete 控件的集成。我没有尝试将数据连接到控制器或其他任何内容。这取决于你。
http://codepen.io/anon/pen/pjBKWR
关于我的实现需要注意的重要事项：
代码如下：
myApp.directive('autoExpandInput', function() {
return {
restrict: 'E',
replace: 'true',
template: '' +
'<div>' +
'<textarea rows="1" tabindex="-1"></textarea>' +
'<input type="text" value="{{inputValue}}" />' +
'</div>',
link: function(scope, elem, attrs) {
elem.find('input').bind('focus', function (ev) {
ev.target.tabIndex = -1;
ev.target.previousSibling.focus();
});
elem.find('textarea').bind('blur', function (ev) {
setTimeout(function () {
ev.target.nextSibling.tabIndex = 0;
});
})[0].oninput = function (ev) {
var textarea = ev.target;
scope.$apply(function() {
scope.inputValue = textarea.value;
});
textarea.style.height = "";
// you may need to play around with the math here a little
if (textarea.clientHeight < textarea.scrollHeight + 2) {
textarea.style.height = textarea.scrollHeight + 2 + "px";
textarea.nextSibling.style.height = textarea.scrollHeight + 2 + "px";
}
}
}
};
});
最简单的方法是保留输入框并在其上方（或下方）显示查询。由于筛选列表默认显示在输入框下方，因此在上方显示更好。使用这种方法是一种妥协，但是有效。您始终可以将输入框大小设置为零或隐藏，并添加控件以在搜索文本区域单击时聚焦输入框。
<md-input-container flex>
<span class="md-longwinded-search">{{ctrl.searchText}}</span>
<label>Label</label>
<input type="text"/>
</md-input-container>
CSS：
.md-longwinded-search {
width: 100%;
height: auto;
word-wrap: normal;
overflow: auto;
}
md-autocomplete指令包装起来，以便编写更清晰、可管理的代码。祝你好运，玩得开心 ;) - Vijay Dev