如果 span 中有文本，为什么 Angular Material 模态对话框会展开？

Question

我有html这样的

<md-dialog aria-label="Reject" ng-cloak="">
  <form name="rejectionForm">
    <md-dialog-content>
      <div class="md-dialog-content">
        <h2 class="md-title">Reject confirmation for</h2>
        <span ng-bind-html="vm.parent.task.label"></span>
        <textarea placeholder="Please provide a reason for rejection" style="width: 530px; height: 75px"></textarea>
      </div>
    </md-dialog-content>
    <md-dialog-actions layout="row">
      <span flex="flex"></span>
      <md-button ng-click="vm.parent.cancel()">CANCEL</md-button>
      <md-button ng-click="vm.parent.reject()" class="md-primary md-raised">REJECT</md-button>
    </md-dialog-actions>
  </form>
</md-dialog>

模态对话框扩展到 1032 像素。当我将 span 更改为 div（或者如果我将显示设置为块）时，它会起作用，我可以使用 div 但我想知道如果有文本的 span，为什么模式对话框会扩展。

Answer 1

经过一番调查，似乎是 textarea 在跨度之后导致问题的组合，而不是 span 本身，可以通过删除 textarea 来观察 - span 的行为类似于 div.

将display:block添加到textarea解决了问题-CodePen

<span>wqweqweqweqweqweqweqw eqweqwe qweqweqweqweqweq weqweqweqwe qweqwe </span>
<div>
    <textarea placeholder="Please provide a reason for rejection" style="width: 530px; height: 75px; display:block"></textarea>
</div>

如果 span 中有文本，为什么 Angular Material 模态对话框会展开？

Why Angular Material modal dialog expand if there is text inside span?

javascript

modal-dialog

angularjs

angular-material