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

This should be an easy answer but I'm not getting it here.

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

<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>

When I resize the screen down the text doesn't overflow it just gives me ... and cuts off the text and the score.

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

Things I've tried off the top of my head:

我尝试过的事情：

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

I'd prefer not use @media here to lower the font size unless absolutely needed. Ideally it would just wrap down to the line below.

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

2 个解决方案

#1

This worked perfect. It had inherited this from Ion-item

这很完美。它从Ion-item继承了这个

white-space: none;

and I just needed to add this to the class for the span:

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

white-space: normal;

#2

I think that this is what you need.

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

So in the below example I tried simulating what I thought might be the problem. I am using the angular filter limitTo to restrict the length of the characters, if you want to change this length, all you need to do is change the value of the 15 in the below code to your desired length. I also added some extra code, please either use it or ignore it, for the layout issue. I set the parent span to position:relative;display:block so that it will take the entire width of the window, the second child span I gave position:absolute;top:0px;right:0px; so that it gets fixed on the right side, finally I added the CSS display:block;padding-right; to the first child span, so that it takes the entire width, and the padding is to take into account the absolute positioned span. Please let me know if this fixes your issue.

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

JSFiddle Demo

JSFiddle演示

HTML:

HTML：

<div ng-controller='MyController' ng-app="myApp">
    <span style="position:relative;display:block;" ng-show="myResults !=null && !isShowDetails" class="yourScore">
    <span style="position:relative;display:block;padding-right:120px;">{{'YOUR SCORE (best 4) : '+myResults.fullSumBest+' pts - total: '+user.userScore+' pts' | limitTo : limit}}</span>

      <span style="position:absolute;top:0px;right:0px;" ng-init="bool = false;limit=15;" ng-click="bool=!bool;limit=bool ? 100000 : 15">
         {{bool ? '[ + ] hide details ' : '[ + ] show details '}}
      </span>
    </span>
</div>

#1