如何根据元素字符串长度调整select元素？ （Angular2）

Question

我的html中有一个angular select元素：

<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>

我的一些textValue比选择的默认大小略长，所以它超出了元素边框：

如何调整文字大小？

Answer 1

在材料设计中， 内容不会设置元素的大小 。

元素必须是灵活的，并且与其他布局元素完全和谐并且成比例，并且应该能够基于用户焦点/交互来改变纹理，颜色，大小和重要性。

  

光，表面和运动的基本原理是传达物体如何在空间中相互作用，相互作用和相互作用的关键。逼真的灯光显示接缝，划分空间，并指示移动部件。

内容必须以自然的方式进行调整和跟进。

因此，内容不会设置元素的大小，但必须在所有元素状态下都很好看，即使在剪切时也是如此。

考虑使用

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

...在<md-option>上。如果您不喜欢或不同意md principles & guidelines，请不要使用材料设计。
但如果您使用它，请理解并尊重其原则。

其他选项包括：

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