Html 如何使选择元素根据元素字符串长度进行调整？（2）

我的html中有一个角度选择元素：

<div fxLayout="column" fxLayoutAlign=" center">

    <div fxLayout="column">
      <md-select placeholder="My Select" name="select">
        <md-option *ngFor="let elem of elements" [value]="select.value">
          {{elem.textValue}}
        </md-option>
      </md-select>
    </div>

</div>

{{elem.textValue}}

我的一些

textValue

比选择的默认大小稍长，因此超出了元素边框：

---

如何使其调整到文本大小？

在材质设计中，内容不设置元素的大小

这些元素必须是灵活的，并且与其他布局元素保持完美的协调和比例，并且应该能够根据用户焦点/交互改变纹理、颜色、大小和重要性

光、表面和运动的基本原理是传达物体如何在空间中移动、相互作用和存在以及相互关系的关键。真实照明显示接缝、分割空间并指示运动部件

内容必须以自然的方式进行调整和遵循

因此，内容不设置元素的大小，但必须在所有元素状态下都保持良好的外观，即使在剪裁时也是如此

考虑使用

text-overflow:elipsis;
overflow: hidden;
white-space: nowrap;

…在

s上。如果您不喜欢或不同意，请不要使用材料设计。
但如果你使用它，就要理解并尊重它的原则

其他选择包括：

• 缩短消息
• 在选择框上方或工具提示内放置一些信息，以便用户可以访问更多信息

---

您使用的是什么版本的角材料？材料2.0.0-beta.3显示额外文本，如

…

。此外，您可以始终使用类并为其指定宽度，请参阅此plunker:@AhmedMusallam请发布有效的plunker链接。