文本加载时垂直溢出答案

【问题标题】：Vertical overflow on text load文本加载时垂直溢出
【发布时间】：2016-02-16 16:55:08
【问题描述】：

我一直在处理 div，现在我正在处理 html/css 部分以完成样式；之后，我将处理 php 部分以从数据库加载 div 内的文本；
div：

HTML：

<div class="descriereapostarii">
 wwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwww
</div>

在这里你可以看到我的问题，我的 div 的行为与上面的 HTML 代码块完全一样，我不希望那样（水平溢出）我希望 div 垂直溢出。
（这里我有 250 个字符，这是因为当用户编写描述时，最大接受限制为 250）

CSS：

.descriereapostarii{
padding:1px;
float:left;
position:relative;
border:1px solid #00A800;
height:80px;
width:460px;
overflow:auto;}

问题：
当页面加载时，我希望 div 内的内容仅相对于实际 div 的大小垂直滚动，类似于当您将描述写入 stackoverflow 上的问题时的此帖子框，它只会溢出垂直而不是水平，我想对我的 div 做同样的事情，有什么想法吗？

【问题讨论】：

如果没有空格 - 即：单个单词，在多行中拆分文本会有点困难。
stackoverflow.com/questions/2566290/…的可能重复
@RononDex 这不是一回事，那家伙的文字被打断了，文字被限制在特定的数字或字符/行上，就像他让它那样显示，当我会一行中有 1-250 个字符的文本，我正在尝试使其垂直溢出；）

标签： html css

【解决方案1】：

将此用于您的 div ：

word-wrap: break-word;

演示：

http://www.w3schools.com/cssref/tryit.asp?filename=trycss3_word-wrap

【讨论】：

【解决方案2】：

添加这个css来禁用垂直滚动：

overflow-x: hidden;

【讨论】：

它隐藏了溢出，文本仍然在 div 之外 :(

【解决方案3】：

如果您需要在单词中换行，请使用word-break: break-word;

注意：对于中文、日文和韩文文本，您可能需要word-break，因为word-wrap 在某些情况下不起作用。

.descriereapostarii{
  padding:1px;
  float:left;
  position:relative;
  border:1px solid #00A800;
  height:80px;
  width:460px;
  overflow:auto;
  word-break: break-word;
}

<div class="descriereapostarii">
wwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwww
</div>

【讨论】：