如何强制div内的文本

Question

我的网站有点问题。我并排有3个三个盒子（box1，box2，box3）。 Box1中的文本将根据日期（）动态生成。

我遇到的问题是：box1中的某些文字似乎是向上推动其他框上的方框和图标。

CSS

.box1{
margin-left: 0px;
margin-top: 60px;
width: 300px;
height: 200px;
background-color:#D8D8D8 ;  
position: relative; 

}

.box2{ 
 margin-left: 350px;
 margin-top: -200px;
  width: 300px;
height: 200px; 
background-color:#D8D8D8 ; 
}

.box3{
margin-left: 700px;
margin-top: -200px;
 width: 300px;
height: 200px;
background-color:#D8D8D8 ; 
}

.result{
        color :teal ;  
        font-family: cambria; 
        font-weight: normal; 
        text-align:center; 
        font-size:1.85em; 
         margin-top: 0px;   

}

.mic{
 position: absolute;
margin-left: 250px;
margin-top: -25px;
}

.clock{
 position: absolute;
margin-left: -460px;
margin-top: -25px;
}

.calendar{
position: absolute;
margin-left: 940px;
margin-top: -25px;
}

3个例子如下图所示

Answer 1

试试这个小曲子：

.prevent-text-breakouts {
  -ms-word-break: break-all;
      word-break: break-all;
      word-break: break-word;
  -webkit-hyphens: auto;
     -moz-hyphens: auto;
          hyphens: auto;
}

您还可以考虑在这些框上使用overflow属性。

Answer 2

1. 找出错误发生时结果 div中添加的“文本”。可能会以某种方式插入格式错误的HTML。

2. 您可以使用 float：left; 清理CSS，而不是根据过多的边距定位元素。如果您需要我详细说明，请告诉我。

看看这个小提琴：http://jsfiddle.net/dEhEt/5/

它不包含每个框的图标，但有许多不同的方法可以实现这种效果，我会让你决定使用哪一个。