css - 限制每行的字符数

Question

如果用户在一行中发布 50 个字符，我如何确保使用 CSS 在 block (宽度:100 像素；)中显示 50 个字符。 现在，我的观点如下。

    <div class='example-wrapper'>
      <%= simple_format(@user.content , class:'example')  %>
    </div>

如果用户在@user.content 的一行中发布了 50 个字符(没有换行符)，它就会从浏览器中突出来。我并不是说我使用了溢出:隐藏;。虽然我使用了空白:普通的; ， 没有什么变化。请告诉我该怎么做。

现在，scss 在下面。

        .example-wrapper{
          background-color:red;
          max-width:100px;
        }
       .example{
            max-width:100px;
            white-space:normal;
        }

Answer 1

您可以使用截断 方法。一个例子:

truncate("Once upon a time in a world far far away", length: 17)
# => "Once upon a ti..."

在这里阅读更多:http://api.rubyonrails.org/classes/ActionView/Helpers/TextHelper.html#method-i-truncate

以你的例子，它会是这样的:

<div class='example-wrapper'>
  <div class='example'>
    <%= trucate(simple_format(@user.content), length: 50)  %>
  </div>
</div>