Question

考虑这个例子：

CSS

.a1 {
      border-style: solid;
      border-width: 1px;
      font-size: 1em;
      line-height: 1.25em;
      height: 2.5em;
      max-height: 2.5em;
    }

<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
</head>

<body>
  <h1>Hello World!</h1>

  <div 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>

目前，在调整页面宽度时，它在Firefox 43中表现如下：

也就是说，文本会尝试填充div的宽度（由页面宽度设置）。

我想要做的是：

将高度固定为两个文本行（或者像我一样，2.5em，如果行高为1.25 em，字体大小为1em）;
（假设文本是单行） - 修复宽度，使文本适合两个文本行，第一行的宽度与第二行的宽度大致相同

...也就是说，我希望div的格式如下：

......在浏览器窗口缩放时，它会保持这样 - 具有固定的宽度/高度。特别是 - 我不想为div设置显式宽度，但div宽度应根据文本内容设置：

如果文字内容＆＃39;宽度小于200px（即假设单行），则div宽度为200px
如果文字内容＆＃39;宽度大于200像素，假定有两行，因此文本被分解，因此两行中的内容大致相同，然后是较长行的宽度

这可能与纯CSS有关 - 如果没有，是否有人可以建议用JS（或jQuery）+ CSS？

Answer 1

好的，最简单的方法是修复div的宽度，你也可以添加text-align：justify。你可以在plunker

中看到它

consume

虽然这不值得。文本对齐和文本对齐在这里没用，我只是添加它们以便你知道它们存在。

但是如果你想通过计算文本宽度的硬路径并将div设置为宽度的一半。你可以找到很多帮助here

Answer 2

嗯，显然一个简单的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

如果有更好的答案，我会重新接受它......

样式div所以它是两行文本高，基于文本内容的宽度适合两行？

2 个答案: