限制css中每行的字符数

Question

如果用户在一行中发布50个字符，我如何确保50个字符显示在CSS块(width:100px;)中。现在，我的观点如下。

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

如果用户在@user.content中的一行中发布了50个字符(没有换行)，它就从浏览器中突出了出来。我并不是说我使用overflow:hidden;。虽然我使用的是white-space:normal;，但没有什么变化。错误如下图所示。我想展示所有的角色。

​

​

请告诉我怎么做。

现在，scss在下面。

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