Angularjs 具有长值的角度材质md选项宽度问题

我对角材料

md选项

size存在问题，其中值字符串很长，它不符合弹性尺寸，并导致宽度打破弹性尺寸

HTML:

<div layout="row" flex class="md-padding" ng-app="app">
  <div layout="row" flex="100">
    <div flex="35" layout="row" layout-align="start center">Group:</div>
    <div flex="65" layout-align="start center">
      <md-select ng-model="SelectedGroup">
        <md-option value="Group 1">
          Group 1
        </md-option>
        <md-option value="Group 2">
          Group 2 has long text Lorem ipsum dolor sit amet, consectetur adipisicing elit. Enim distinctio possimus corporis dolores ad obcaecati incidunt quia dolore, nesciunt praesentium provident suscipit amet, dignissimos natus repellat voluptatibus facilis molestiae quos.
        </md-option>
      </md-select>
    </div>
  </div>
  <div flex="5"></div>
  <div layout="row" flex="100">
    <div flex="35" layout="row" layout-align="start center">
      Item:
    </div>
    <div flex="65" layout="row" layout-align="start center">
      <md-select ng-model="SelectedItem">
        <md-option ng-value="Item1">
          Item 1
        </md-option>
      </md-select>
    </div>
  </div>
</div>

组：
第一组
第2组有长文本Lorem ipsum dolor sit amet，Concertetur Adipising elit。在所有人身上都有明确的权利，包括保护他人的权利、排斥他人的自然尊严和对他人的侮辱。
项目：
项目1

---

一个非常简单的错误。每个div的弹性总和应为100。在您的情况下，它是

100+5+100

。只要将其设置为

40+10+40

，它就会工作。 这是代码

<div layout="row" flex class="md-padding" ng-app="app">
 <div layout="row" flex="40">
  <div flex="35" layout="row" layout-align="start center">Group:</div>
  <div flex="65">
   <md-select ng-model="SelectedGroup">
    <md-option value="Group 1">
      Group 1
    </md-option>
    <md-option value="Group 2">
      Group 2 has long text Lorem ipsum dolor sit amet, consectetur adipisicing elit. Enim distinctio possimus corporis dolores ad obcaecati incidunt quia dolore, nesciunt praesentium provident suscipit amet, dignissimos natus repellat voluptatibus facilis
      molestiae quos.
    </md-option>
  </md-select>
 </div>
</div>
 <div flex="10"></div>
 <div layout="row" flex="40">
  <div flex="35" layout="row" layout-align="start center">
   Item:
  </div>
  <div flex="65" layout="row" layout-align="start center">
   <md-select ng-model="SelectedItem">
    <md-option ng-value="Item1">
      Item 1
    </md-option>
   </md-select>
  </div>
 </div>
</div>

组：
第一组
第2组有长文本Lorem ipsum dolor sit amet，Concertetur Adipising elit。在任何情况下，都应将身体和盲肠的所有权区分开来，以保护他人的利益，并使脸上的赘肉远离自然尊严
莫莱斯蒂亚库斯。
项目：
项目1

---

这是工作原理。

在我的例子中，为了让md选项正确修剪&。。。很长的选项标签，我必须：

设置

layout=“无中心”

（添加了无）

到包装

{{eachOption.name}

那么，您希望更长的名称有两行吗？问题不在空格或分词符中，文本应该用所选的flex size exp:flex=“65”包装，但它会将下一个元素向右推，以获得更大的宽度。（默认为ellipis文本）谢谢你，我在朋友的帮助下应用了相同的解决方案。

<div layout="row" layout-align="none center">
    <md-select aria-label="Please select an option">
        <md-option ng-repeat="eachOption in myModel.Values" ng-value="eachOption">
            {{eachOption.name}}
        </md-option>
    </md-select>
</div>