确保div不会比文本更大 - 包裹溢出

时间:2016-05-24 10:55:01

标签: css

我有一个div来自服务器的数据。 数据有时包含一系列没有任何间距的字符,例如" xxxxxxxxxxxxxx"和" --------------------" 当这些序列变得很长时,我的div会以div克服滚动和边界并且看起来很糟糕的方式呈现。

我尝试过使用单词分词和自动换行等所有解决方案。但问题是,如果我修复-----------------(以SOH叹息为例)并且它被完美地包裹起来那么另一个案例就不如信case(" xxxxxxxxxxx ....")正在剪切它,因此像current这样的常规单词也会被分成2行。

我需要IE和Chrome的解决方案

这是小提琴:

https://jsfiddle.net/7vcw66cd/

以下是代码:



.CIV-whatup{
  border-collapse:separate;
  box-sizing:border-box;
  color:rgb(0, 0, 0);
  display:block;
  font-family:arial;
  font-size:12px;
  font-weight:normal;
  height:34px;
  line-height:17px;
  margin-bottom:8px;
  margin-top:8px;
  min-height:15px;
  padding-bottom:0px;
  padding-left:10px;
  padding-right:10px;
  padding-top:0px;
  white-space:pre-wrap;
  word-wrap:break-word;
  zoom:1;
  word-break: break-all; 
}

<p class="CIV-whatup">!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!</p>
<p class="CIV-whatup">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p>
<p class="CIV-whatup">---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------</p>
<p class="CIV-whatup">
aaaaaa aaaaaa aaaaaa aaaaaa aaaaaa aaaaaa aaaaaa aaaaaa aaaaaa aaaaaa aaaaaa aaaaaa aaaaaa aaaaaa aaaaaa aaaaaa aaaaaa aaaaaa aaaaaa aaaaaa aaaaaa aaaaaa aaaaaa aaaaaa aaaaaa aaaaaa aaaaaa aaaaaa aaaaaa aaaaaa aaaaaa aaaaaa aaaaaa aaaaaa aaaaaa aaaaaa aaaaaa aaaaaa aaaaaa aaaaaa aaaaaa aaaaaa aaaaaa aaaaaa aaaaaa aaaaaa aaaaaa</p>
&#13;
&#13;
&#13;

0 个答案:

没有答案