Question

这是我的fiddle，如何将内容包装在我的DIV中，以便它与我的DIV重叠？我知道我们可以使用

word-wrap: break-word;

但我有超过100个带有数字的小“盒子”，我希望所有东西都适合里面（大约4-5位数）。

下面是我的css

提前致谢

/* desk boxes*/
.desk_box_ver{ 
   width: 18px;
   height: 33px;
}   


.desk_box_hor{ 
  width: 23px;
  height: 10px;
}   


.desk_box_hor, .desk_box_ver { 
   position: absolute; 
   border: 4px solid black; 
   padding:10px;
}

Answer 1

删除此

.desk_box_hor{ 
   width: 23px;
   height: 10px;
 }

您正在使框大于数字。他们无论如何都不适合，除非：

你让字体变小;
空白：包裹;
使用填充

修改

回答以下回复

您可以通过JQuery删除内联样式，如下所示：

$('.desk_box_hor').attr('style', function(i, style) { $(this).attr("style", ""); }); $('.desk_box_ver').attr('style', function(i, style) { $(this).attr("style", ""); });

然后正确应用css类

Answer 2

要根据容器的大小缩放文本，请在此处查看此帖：how to set font size based on container size?

接受的答案是最好和最可靠的解决方案。

要围绕文本缩放容器，只需删除涉及容器的CSS的width和height即可。这是您的小提琴的更新版本，我刚刚删除了宽度和高度：http://jsfiddle.net/3qrxezjv/

Answer 3

您可以使用width，而不是强制使用固定min-width。这样，盒子不会小于其内容：

.desk_box_ver{ 
    min-width: 18px;
}   
.desk_box_hor{ 
    min-width: 23px;
}

＆＃13;

/* desk boxes*/
.desk_box_ver{ 
	min-width: 18px;
	height: 33px;
}	
.desk_box_ver:hover{
	cursor: pointer;
}
.desk_box_hor{ 
	min-width: 23px;
	height: 10px;
}	
.desk_box_hor:hover{
	cursor: pointer;
}
.desk_box_hor, .desk_box_ver { 
	position: absolute; 
	border: 4px solid black; 
	padding:10px;
}

＆＃13;

<div class="desk_box_hor" id="desk_H15" data-rel="236" style="left:325px;top:50px;">18556</div>
<div class="desk_box_ver" id="desk_I06" data-rel="219" style="left:93px;top:100px;">25753</div>

＆＃13;

使用CSS在DIV中包装文本？

3 个答案: