限制css中每行的字符数

Question

如果用户在一行上发布50个字符，如何确保使用CSS在块（public static final int nthBooleanPalindrome(int n) { if (n == 1) return 0; if (n == 2) return 1; int m = 31 - Integer.numberOfLeadingZeros(n); int c = 1 << (m - 1); int b; if (n >= 3*c) { int a = n - 3*c; int d = 2*c*c; b = d + 1; int k2 = 1; for (int i = 1; i < m; i++) { k2 <<= 1; b += a*k2/c%2*(k2 + d/k2); } } else { int a = n - 2*c; int d = c*c; b = d + 1 + (n%2*c); int k2 = 1; for (int i = 1; i < m - 1; i++) { k2 <<= 1; b += a*k2/c%2*(k2 + d/k2); } } return b; } ）中显示50个字符。  现在，我的观点如下。

width:100px;

如果用户在@ user.content中在一行上发布了50个字符（没有换行），则它会从浏览器中弹出。我并不是说我使用<div class='example-wrapper'> <%= simple_format(@user.content , class:'example') %> </div> 。虽然我使用overflow:hidden;，但没有任何变化。 错误如下图所示。我想展示所有角色。

请告诉我该怎么做。

现在，scss在下面。

white-space:normal;

Answer 1

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

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

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

自动换行属性允许长字能够被打破并换行到下一行。