样式化 div 使其为两行文本高，宽度基于文本内容适合两行？
sdb*_*bbs 5 html javascript css
考虑这个例子：
CSS
.a1 {
border-style: solid;
border-width: 1px;
font-size: 1em;
line-height: 1.25em;
height: 2.5em;
max-height: 2.5em;
}
.a1 {
border-style: solid;
border-width: 1px;
font-size: 1em;
line-height: 1.25em;
height: 2.5em;
max-height: 2.5em;
}
目前，在 Firefox 43 中，调整页面宽度时的行为如下：
也就是说，文本尝试填充 div 的宽度（由页面宽度设置）。
我想做的是：
- 将高度固定为两个文本行（或者像我一样，如果行高为 1.25em，字体大小为 1em，则为 2.5em）；
- （假设文本是单行）-固定宽度，使文本适合两行文本，并且第一行的宽度与第二行的宽度大致相同
...也就是说，我希望 div 的格式如下：
...并且它会保持这样 - 具有固定的宽度/高度 - 在浏览器窗口缩放时。具体来说 - 我不想为 div 设置显式宽度，但 div 宽度应根据文本内容设置：
- 如果文本内容的宽度小于 200 px（即假设为单行），则 div 宽度为 200 px
- 如果文本内容的宽度大于 200 px，则假定为两行，因此文本会被分解，因此两行中的内容大致相同，然后取较长行的宽度
这是否可以用纯 CSS 来实现 - 如果不能，是否有人可以建议使用 JS（或 jQuery）+ CSS 的方法？
嗯，显然简单的 CSS 解决方案是不可能的；我记得在这个网站的其他地方看到过一个可以进行文本中断的 JS 解决方案，但我当时无法将其应用于我的问题，所以我忘记了参考资料 - 所以现在我推出了自己的解决方案，它至少有足够的贯穿console.log始终。
所以，这是我的解决方案，它正是我想要的：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<script type="text/javascript" src="/media/Data1/work/bbs/gits/econdk-vis-01_git/jquery-1.12.3.min.js"></script>
<style type="text/css">
.a1 {
border-style: solid;
border-width: 1px;
font-size: 1em;
line-height: 1.25em;
height: 2.5em;
max-height: 2.5em;
}
</style>
<script type="text/javascript">
// see SO: 1582534
$.fn.getWidthSingleLine = function(){
var contents = this.contents(),
wrapper = '<span style="display: inline-block; white-space: nowrap;" />',
width = '';
contents.wrapAll(wrapper);
//contents.parent().css("white-space", "nowrap"); // try this, instead of setting unreasonable large width? ok - though set explicitly above
var fontsize = parseFloat( contents.parent().css("font-size") ); //px
width = contents.parent().width(); // parent is now the wrapper
contents.unwrap();
return {
widthpx: width,
widthem: width / fontsize
};
}
$.fn.getHeightFromWidth = function(inwidth){
var contents = this.contents(),
wrapper = '<span style="display: inline-block;" />',
width = '';
contents.wrapAll(wrapper);
contents.parent().width(inwidth); // parent is now the wrapper
var fontsize = parseFloat( contents.parent().css("font-size") ); //px
height = contents.parent().height(); // parent is now the wrapper
contents.unwrap();
return {
heightpx: height,
heightem: height / fontsize
};
};
ondocready = function() {
var retwobj = $("#txtest").getWidthSingleLine();
console.log( retwobj.widthem + " em " + retwobj.widthpx + " px ; docw " + $(document).width() + " winw " + $(window).width() );
var findwidthpx = retwobj.widthpx/2;
var rethobj = $("#txtest").getHeightFromWidth( findwidthpx );
// note: $("#txtest").css("max-height")) is in pixels!
var maxh = parseFloat( $("#txtest").css("max-height") );
var hdiffpx = rethobj.heightpx - maxh;
console.log( rethobj.heightem + " em " + rethobj.heightpx + " px ; hdiffpx: " + hdiffpx + " ; findwidthpx: " + findwidthpx);
// if we take the width of single line and halve it, we will
// get at least two lines, maybe more - but certainly not less than two lines
// ergo, hdiffpix should always be >= 0
while (hdiffpx > 0) {
// increase slowly findwidthpx; say steps of 10 px
findwidthpx += 10;
rethobj = $("#txtest").getHeightFromWidth( findwidthpx );
hdiffpx = rethobj.heightpx - maxh;
console.log(" in loop: ", rethobj.heightem + " em " + rethobj.heightpx + " px ; hdiffpx: " + hdiffpx + " ; findwidthpx: " + findwidthpx);
}
console.log(" after loop: ", rethobj.heightem + " em " + rethobj.heightpx + " px ; hdiffpx: " + hdiffpx + " ; findwidthpx: " + findwidthpx);
// assign finally
$("#txtest").width(findwidthpx);
}
$(document).ready(ondocready);
</script>
</head>
<body>
<h1>Hello World!</h1>
<div id="txtest" class="a1">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad </div>
</body>
</html>
...它的预期console.log输出是这样的：
68.375 em 1094 px ; docw 1386 winw 1386
3.75 em 60 px ; hdiffpx: 20 ; findwidthpx: 547
in loop: 3.75 em 60 px ; hdiffpx: 20 ; findwidthpx: 557
in loop: 3.75 em 60 px ; hdiffpx: 20 ; findwidthpx: 567
in loop: 3.75 em 60 px ; hdiffpx: 20 ; findwidthpx: 577
in loop: 2.5 em 40 px ; hdiffpx: 0 ; findwidthpx: 587
after loop: 2.5 em 40 px ; hdiffpx: 0 ; findwidthpx: 587
如果有更好的答案出现，我会重新接受......