Question

我在下面以这种方式制作了一些md按钮，但不幸的是，如果有多个单词，则标签内的第二个单词不会大写。

<md-button ui-sref="DMmain">
    <i class="fa fa-cog fa-2x"></i>
    <h3>Device Management</h3>
</md-button>
<md-button ui-sref="ARmain">
    <i class="fa fa-lock fa-2x"></i>
    <h3>Access Rules</h3>
</md-button>
<md-button ui-sref="UMmain">
    <i class="fa fa-user fa-2x"></i>
    <h3>User Management</h3>
</md-button>
<md-button>
    <i class="fa fa-file-text fa-2x"></i>
    <h3>Account Profile</h3>
</md-button>

效果如下图所示，

<i class>是一个名为Font Awesome的库，我只用于图标。提前感谢任何想法如何解决这个问题。

已编辑＆amp;已解决：对text-transform: capitalize !important;执行md-button并不起作用。您必须将类放在要编辑的标记上，并在css文件中将text-transform: capitalize;添加到您的类中。

Answer 1

不幸的是，您必须覆盖CSS才能实现此目的，如下所示：

＆＃13;

(function() {
  "use strict";
  angular.module('app', ['ngAnimate', 'ngMaterial', 'ngAria'])
    .controller('mainCtrl', function($scope) {

    });
})();

＆＃13;

.capitalize-button {
  text-transform: capitalize;
}

/* 
OR just override the .md-button class in your css.

.md-button {
  text-transform: capitalize !important;
} 
*/

＆＃13;

<!DOCTYPE html>
<html ng-app="app">
  <head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.7/angular.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.7/angular-animate.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.7/angular-aria.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-material/1.0.9/angular-material.min.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/angular-material/1.0.9/angular-material.min.css">
  </head>

  <body ng-controller="mainCtrl">
    <md-button ui-sref="DMmain">
      <i class="fa fa-cog fa-2x"></i>
      <h3 class="capitalize-button">device management</h3>
    </md-button>

    <md-button ui-sref="ARmain">
      <i class="fa fa-lock fa-2x"></i>
      <h3 class="capitalize-button">access rules</h3>
    </md-button>

    <md-button ui-sref="UMmain">
      <i class="fa fa-user fa-2x"></i>
      <h3 class="capitalize-button">user management</h3>
    </md-button>

    <md-button>
      <i class="fa fa-file-text fa-2x"></i>
      <h3 class="capitalize-button">account profile</h3>
    </md-button>
  </body>
</html>

＆＃13;

Angularjs md-button单词大写

1 个答案: