javascript - 如何使顶线短于底线(在div内)

Question

我有一个无序列表，其中包含 3 个列表项(在我的示例中表示为 3 个绿色框)。每个框都有一个图像和 3 个 div(标题、位置、价格)。我只关心每个框的标题 div。

如果标题足够长以致于产生 2 行，我希望顶行始终比底线短。我的演示站点看到了here显示框 1 和 2 的设置错误，框 #3 显示正确的设置。

我遇到了麻烦...这可能需要js来判断行长，然后把底线设置得更长一些。屏幕分辨率可能会发挥作用，但我不能使线条在不同的屏幕尺寸上保持一致吗？

这是列表项之一，我对 div“titlebox”感兴趣:

<li class="list__item">
            <figure class="list__item__inner">

   <p class="vignette" style="background-image:url(http://www.ht-real-estate.com/template/ht2014/images/landscape/05.jpg)"></p>
   <div class="titlebox">This line is longer than this line</div>
   <div class="locationbox">Location</div>
   <div class="pricebox">Price</div>

</li>

任何帮助都很棒，谢谢!!

附上截图:

Answer 1

这是一个 JS 解决方案，在大多数情况下可能对您有用(我说大多数情况是因为文本字符可以有不同的宽度)。它基本上将您的句子分成两行，并动态插入 <br>。标签。代码中的注释:

$(".titlebox").each(function(){
  var len = $(this).text().length,
      words = $(this).text().split(" "),
      line1 = [],
      line2 = [],
      html = "";

  // iterate through each word in the title
  $.each(words, function(i,word){
    // if line 1's current length plus the length of this word
    // is less than half the total characters, add word to line 1
    // else add to line 2
    // (check index of word to maintain order)
    if((line1.join(" ")+" "+word).length < (len/2) && (i == line1.length)){
      line1.push(word);
    } else {
      line2.push(word);
    }
  });

  // concatenate the results with a '<br>' separating the lines
  html = line1.join(" ")+"<br>"+line2.join(" ");

  // replace the .titlebox content with this new html string
  $(this).html(html);
});