文本未包含在div元素中

时间:2016-08-03 06:57:47

标签: javascript html css html5 whitespace

我已经尝试了我可以找到的每个CSS设置但是我无法获取此div中的文本来包装!我很感激一些帮助,因为这是我10年来第一次使用HTML。这是我最近的尝试:

#text0 {
  word-break: break-word; 
  max-width: 500px; width: 500px; 
  word-wrap: break-word; 
  overflow: hidden; 
  white-space: pre; 
  background-color: #afed67; 
}
<div id="text0">

    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scramble
    
    it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

</div>

BTW这一切都必须进入Wordpress页面,我知道他们可以对CSS和JavaScript有所了解。

3 个答案:

答案 0 :(得分:6)

检查此代码段。您只需要word-breakwidth

#text0 {
  word-break: break-word; 
  width: 500px; 
  background-color: #afed67; 
}
<div id="text0">

    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scramble
    
    it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

</div>

答案 1 :(得分:3)

以下是您的预期 - 请参阅我使用的CSS:

#text0 {
  word-break: break-word;
  max-width: 500px;
  width: 500px;
  background-color: #afed67;
  line-height: 25px;
}

以下片段:

#text0 {
  word-break: break-word;
  max-width: 500px;
  width: 500px;
  background-color: #afed67;
  line-height: 25px;
}
<div id="text0">

    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scramble
    
    it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

</div>

答案 2 :(得分:1)

它的overflow:hidden;white-space:pre;让你感到烦恼。删除它们,你就没事了。

默认情况下,Div有overflow:wrap;white-space:normal;,这就是您想要的行为。