Question

如果用户在一行上发布50个字符，如何确保使用CSS在块（宽度：100px;）中显示50个字符。现在，我的观点如下。

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

如果用户在@ user.content中在一行上发布了50个字符（没有换行），它就会从浏览器中弹出。我不是说我使用overflow：hidden;。虽然我使用的是white-space ：正常; ，没有什么变化。请告诉我怎么做。

现在，scss在下面。

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

Answer 1

您可以使用truncate方法。一个例子：

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

在此处阅读更多内容：High Performance Spark > Chapter 4. Join

用你的例子可能是这样的：

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

限制每行的字符数

1 个答案: