html - 如何删除 ionic 中每个单词后的换行符

Question

我在我的 ionic 应用程序中创建了一个自定义列表，它在我的浏览器上运行良好。但是当我在 android 上构建它时，显示名称的 h2 标记中的文本在每个单词后换行。我已经尝试从 css 中删除 word-wrap 和 word-break，但它仍然不起作用。

这是 View 的 HTML:

    <ion-view view-title="Crave">
      <fab ui-sref="post" class="ink"><i class="ion-compose"></i></fab>
      <ion-content>
        <ion-refresher pulling-text="Pull to refresh" pulling-icon="ion-arrow-down-b" on-refresh="doRefresh()">
        </ion-refresher>
        <div class="m-cards">
          <div class="m-card" ng-repeat="post in posts">
            <div class="m-card-header">
              <span><i class="ion-android-time"></i>&nbsp In 2hrs</span>
              <a href="#/profile-page/{{post.username}}/home"><img ng-src="{{post.face}}" class="ink rip"></a>
              <a href="#/profile-page/{{post.username}}/home"><h2>{{post.name}}</h2></a><br />
              <a href="#/profile-page/{{post.username}}/home"><p>@{{post.username}}</p></a><br /><br />
            </div>
            <span>{{post.postText}}</span>
            <div class="m-card-stats">
              <a href="#" style="color: #9c2014"><i class="ion-ios-heart"></i>&nbsp {{post.likes}}</a>
              <a href="#" style="color: #9c2014"><i class="ion-chatbox"></i>&nbsp {{post.comments}}</a>
              <a href="#" style="color: #9c2014"><i class="ion-android-share-alt"></i></a>
              <span>12d ago</span>
            </div>
            <hr />
          </div>
        </div>
      </ion-content>
    </ion-view>

这是CSS:

    .m-cards {

    }

    .m-card {
      border-radius: 2px;
      margin-bottom: 5px;
      padding: 2px 20px;
      width: 100%;
    }

    .m-card a {
      color: #ef473a;
    }

    .m-card-post-alt {
      color: #777;
      height: 18px;
      overflow: hidden;
    }

    .m-card-header h2 {
      color: #000;
      float: left;
      font-size: 12pt;
      font-weight: 300;
      margin: 0;
      margin-left: 10px;
      word-wrap: normal !important;
      word-break: normal !important;
    }

    .m-card-header p {
      color: #000;
      float: left;
      margin: 0;
      margin-left: 10px;
    }

    .m-card-header span {
      color: #444;
      float: right;
      margin: 0;
    }

    .m-card-header img {
      border-radius: 5px;
      float: left;
      height: 48px;
      width: 48px;
    }

    .m-card-header span {
      color: #444;
      float: right;
      margin: 0;
    }

    .m-card-stats {
      margin-top: 20px;
    }

    .m-card-stats span {
      color: #000;
      float: right;
      margin: 0;
    }

    .m-card-stats a {
      color: #000;
      margin-right: 20px;
    }

提前致谢!!!

Answer 1

终于解决了。我所需要的只是将字间距设置为正常。

.m-card-header h2 {
  color: #000;
  float: left;
  font-size: 12pt;
  font-weight: 300;
  margin: 0;
  margin-left: 10px;
  word-spacing: normal !important;
}