如何在角材料设计的工具提示中添加换行符

Question

如何在工具提示中添加换行符我已经实现了工具提示，但是我无法在工具提示中添加多个换行符或换行符。以下是我的代码

http://codepen.io/apps4any/pen/RWQLyr

HTML

<div ng-controller="AppCtrl" ng-cloak="" class="tooltipdemoBasicUsage" ng-app="MyApp">
  <md-content layout-padding="">
    <md-button class="md-fab md-fab-top-right right" aria-label="Photos">
      <md-icon md-svg-src="img/icons/ic_photo_24px.svg" style="width: 24px; height: 24px;"></md-icon>
      <md-tooltip>
        List1<br>
        List2<br>
        List3<br>
        List4
      </md-tooltip>
    </md-button>
    <div style="margin-top: 150px;">
    </div>
  </md-content>
</div>

CSS：

.tooltipdemoBasicUsage md-toolbar .md-toolbar-tools .md-button, .tooltipdemoBasicUsage md-toolbar .md-toolbar-tools .md-button:hover {
  box-shadow: none;
  border: none;
  transform: none;
  -webkit-transform: none; }
.tooltipdemoBasicUsage .left {
  top: 70px !important;
  left: 56px !important; }
.tooltipdemoBasicUsage .right {
  top: 70px !important;
  right: 56px !important; }

JS

angular.module('MyApp')
.controller('AppCtrl', function($scope) {
  $scope.demo = {};
});

Answer 1

在您的情况下（使用<br>s）添加此CSS似乎可行：

md-tooltip .md-content {
    height: auto;
}

我不确定为什么Angular-Material将高度硬编码为22px。您需要检查此更改是否破坏其他工具提示。

或者，您可以仅通过给它一个类（例如）将其专门应用于此用例tt-multiline，以便可以在CSS中定位它：

md-tooltip.tt-multiline .md-content {
    height: auto;
}

编辑：从Angular-Material 1.1开始，某些类名称已更改为以下划线开头。

在这种情况下使用

md-tooltip ._md-content {
    height: auto;
}

并针对特定班级

md-tooltip.tt-multiline ._md-content {
    height: auto;
}