限制css中每行的字符数答案

【问题标题】：Limiting the number of characters per line in css限制css中每行的字符数
【发布时间】：2016-12-25 01:59:34
【问题描述】：

如果用户在一行上发布 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;
}

【问题讨论】：

【解决方案1】：

如果我理解正确，您可以使用这样的自动换行属性：

.example-wrapper {
  background-color: red;
  max-width: 100px;
  word-wrap: break-word;
}

.example {
  max-width: 100px;
  white-space: normal;
}

word-wrap 属性允许将长单词拆分并换行到下一行。

【讨论】：