Question

这应该是一个简单的答案，但我没有在这里得到它。

<span ng-show="myResults !=null && !isShowDetails" class="yourScore">
  YOUR SCORE (best 4) : {{myResults.fullSumBest}} pts - total: {{user.userScore}} pts 
  <span style="float:right"  ng-click="showDetails()">
     [ + ] show details 
  </span>
</span>

当我调整屏幕大小时，文字不会溢出，只是给了我......并切断了文字和分数。

我尝试过的事情：

  word-wrap: break-word;
  overflow-wrap: break-word;
  width: 100%;

除非绝对需要，否则我不想在这里使用@media降低字体大小。理想情况下，它只会包含在下面的行中。

Answer 1

这很完美。它从Ion-item

继承了这个

white-space: none;

我只需要将其添加到span的类中：

white-space: normal;

Answer 2

我认为这就是你所需要的。

所以在下面的例子中我尝试模拟我认为可能是问题的东西。我使用角度过滤器limitTo来限制字符的长度，如果要更改此长度，您只需将以下代码中15的值更改为您想要的值长度。我还添加了一些额外的代码，请使用它或忽略它，以解决布局问题。我将父跨度设置为position:relative;display:block，以便它占据窗口的整个宽度，我给出的第二个子跨度position:absolute;top:0px;right:0px;，以便在右侧修复它，最后我添加了CSS { {1}}到第一个子跨度，以便它占据整个宽度，并且填充是考虑绝对定位的跨度。如果这可以解决您的问题，请与我们联系。

JSFiddle Demo

<强> HTML：

display:block;padding-right;

如何使用CSS在AngularJS中包装文本？

2 个答案: