如何使顶线短于底线（在div内）

Question

I have an unordered list which contains 3 list items (represented in my example as 3 green boxes). Each box has an image and 3 divs (title,location,price). I'm only concerned with each box's title div.

If the title is long enough so that it produces 2 lines, I want the top line to always be shorter than the bottom line. My demo site seen here shows boxes 1 & 2 with the wrong setup, and box #3 shows the correct setup.

I'm having trouble... this may require js to determine line length and then set the bottom line to be longer. Screen resolution will likely play a role but can't I make the lines consistent across different screen sizes?

Here is one of the list items, I'm interested in the 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>

Any help is great, thanks!!

Screenshot attached too:

Answer 1

Here is a JS solution that might work for you in most instances (I say most instances because text characters can have varying widths). It basically splits your sentences into 2 lines with a dynamically inserted <br> tag. Comments in the code:

$(".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);
});

Answer 2

 html { width: 100%; height: 40%; } body { background-color: #FFFFFF; overflow-y: scroll; overflow-x: hidden; } /* JavaScript disabled */ html.no-js .list__item { width: 100%; float: none; } html.no-js .list__item img { max-width: 9.375rem; /* 150 */ float: right; margin-left: 1.25rem; /* 20 */ } @supports ( display: -webkit-flex ) or ( display: -ms-flex ) or ( display: flex ) { html.no-js .list__item { width: 25%; float: left; } html.no-js .list__item img { max-width: none; float: none; margin-left: 0; } } nav { border: 1px solid #ccc; border-right: none; border-left-color: #006600; width: 100%; margin-bottom: 20px; background-color: #006600; font-family: Arial, Helvetica, sans-serif; font-size: 100%; color: #030303; } nav ul { display: flex; flex-direction: row; margin: 0; padding: 0; } nav ul li { list-style: none; text-align: center; border-left: 1px solid #fff; border-right: 1px solid #ccc; } nav ul li:first-child { border-left: none; } nav ul li:hover { background: #9cb369; } nav ul li a { display: block; text-decoration: none; color: #FFFFFF; padding: 10px 0; } nav { display: table; table-layout: fixed; } ul li { flex-grow: 1; } .x { display: none; } .p { text-align: center; font-size: 14px; margin-top: 80px; } .d { color: #ccc; } nav ul li { display: block; border-bottom: 1px solid #ccc; } .whywelove img{ margin-top: 1%; height: auto; width: 50%; } .font3 { margin-top: 2%; color: #030; font-family: "Times New Roman", Times; font-size: 8vh; } .font4 { font-size: 3.5vh; font-weight: bolder; font-family: "Times New Roman", Times; color: #002B00; line-height:25px; margin-top: -0.5%; margin-bottom: 2% } .vignette { width: 90%; margin-top:5%; margin-left:auto; margin-right:auto; box-shadow: 15px 15px 40px #defeec inset,-15px -15px 40px #defeec inset; height: 240px; background-size: cover; background-repeat: no-repeat; } .vignette2 { width: 800px; margin-top:3%; margin-left:auto; margin-right:auto; box-shadow: 75px 75px 50px #defeec inset,-75px -75px 50px #FFFF inset; height: 600px; background-size: cover; background-repeat: no-repeat; } .container { width: 100%; max-width: 76rem; font-size: 0.875rem; /* 14 */ line-height: 1.375rem; /* 22 */ margin: 0 auto; padding: 0.625rem; /* 10 */ } .container, .container a { color: #cfd7db; } .container a:hover { color: #fff; } h1 { font-size: 2.5rem; /* 40 */ font-weight: 300; line-height: 2.875rem; /* 46 */ text-align: center; margin-bottom: 2.5rem; /* 40 */ } a.divLink { text-decoration: none; } .list { width: 100%; overflow: hidden; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; } .list__item { width: 32%; float: left; /* 10 */ display: -webkit-flex; display: -ms-flexbox; display: flex; padding-top: 0.625em; padding-bottom: 0.825em; margin-left:1%; margin-right:0%; position:relative; line-height:40px; } .list__item .caption { position: absolute; width: 20%; height: 10%; top: 30%; left: 32%; font-size: 3.3em; font-weight:bold; color: red; } .list__item__inner { width: 100%; color: #474d51; background-color: #DEFEEC; border: 1px groove #F8F8F8; overflow: hidden; margin-left:2%; margin-right:2%; -webkit-box-shadow: 0 0.125rem 0.313rem rgba( 0, 0, 0, .2 ); /* 2 5 */ box-shadow: 0 0.125rem 0.313rem rgba( 0, 0, 0, .2 ); /* 2 5 */ } .list__item figcaption { padding: 1.25rem; /* 20 */ } .img-shadow { position: relative; max-width: 100%; float: left; } .img-shadow::before { content: ""; position: absolute; top: 0; bottom: 0; left: 0; right: 0; box-shadow: inset 0 0 80px rgba(0,0,0,.6); -moz-box-shadow: inset 0 0 80px rgba(0,0,0,.6); -webkit-box-shadow: inset 0 0 80px rgba(0,0,0,.6); } .img-shadow img { float: left; } .titlebox{ width: 80%; height: 10%; display: inline-block; font-size: 4.2vh; font-family: Garamond; color: #002000; text-align: center; line-height: 35px; font-weight:bold; margin-top: 5%; margin-right: 10%; margin-bottom: 5%; margin-left: 10%; background-color:grey; } .locationbox{ width: 80%; display: inline-block; font-size: 3.7vh; text-align: center; font-weight:bold; margin-top: 10%; margin-right: 10%; margin-bottom: 5%; margin-left: 10%; font-family: Garamond; color: #002000; font-style: italic; } .pricebox{ width: 80%; font-size: 4.2vh; text-align: center; font-family: Garamond; font-weight:bold; color: #002000; margin-top: 10%; margin-right: 10%; margin-bottom: 5%; margin-left: 10%; } .footer { text-align: center; margin: 2.5rem 0.625rem 0; /* 40 10 */ } .footer a { border-bottom: 1px solid #cfd7db; } @media screen and (max-width: 1950px){ .list__item { width: 32%; } .container { padding: 0; /* 10 */ } .titlebox{font-size:28px;} .locationbox{font-size:28px;} .pricebox{font-size:28px;} } @media screen and (max-width: 1700px){ .list__item { width: 32%; } .vignette { width: 92%; margin-top:5%; margin-left:auto; margin-right:auto; box-shadow: 15px 15px 40px #defeec inset,-15px -15px 40px #defeec inset; height: 240px; background-size: cover; background-repeat: no-repeat; } .container { padding: -10em; /* 10 */ } .titlebox{font-size:27px;} .locationbox{font-size:27px;} .pricebox{font-size:27px;} } @media screen and (max-width: 1440px){ .list__item { width: 32%; } .container { padding: 2.2em /* 10 */ } .titlebox{font-size:27px;} .locationbox{font-size:27px;} .pricebox{font-size:27px;} nav { border: 1px solid #ccc; border-right: none; border-left-color: #006600; width: 100%; margin-bottom: 20px; background-color: #006600; font-family: Arial, Helvetica, sans-serif; font-size: 100%; color: #030303; } nav ul { display: flex; flex-direction: row; margin: 0; padding: 0; } nav ul li { list-style: none; text-align: center; border-left: 1px solid #fff; border-right: 1px solid #ccc; } nav ul li:first-child { border-left: none; } nav ul li:hover { background: #9cb369; } nav ul li a { display: block; text-decoration: none; color: #FFFFFF; padding: 10px 0; } nav { display: table; table-layout: fixed; } ul li { flex-grow: 1; } .x { display: none; } .p { text-align: center; font-size: 14px; margin-top: 80px; } .d { color: #ccc; } nav ul li { display: block; border-bottom: 1px solid #ccc; } } @media screen and (max-width: 64em ) /* 1024 */ { .list__item { margin-right:2%; margin-left:-1%; } .titlebox{font-size:24px;} .locationbox{font-size:24px;} .pricebox{font-size:24px;} .list__item .caption { font-size: 2em; } body { padding: 2.5rem 0; /* 40 */ } .list__item { width: 30%; /* 1 item per row */ float: none; } @supports ( display: -webkit-flex ) or ( display: -ms-flex ) or ( display: flex ) { html.no-js .list__item { width: 30%; } } html.no-js .list__item img { max-width: none; float: none; margin-left: 0; } } @media screen and ( max-width: 50em ) /* 800 */ { .vignette { height: 400px; } .titlebox{font-size:23px;} .locationbox{font-size:23px;} .pricebox{font-size:23px;} .list__item { width: 70%; /* 1 items per row */ } } @media screen and ( max-width: 40em ) /* 640 */ { .vignette { width: 80% height: 300px; } .titlebox{font-size:21px;line-height:25px;} .locationbox{font-size:21px;} .pricebox{font-size:21px;line-height:25px;} .list__item { width: 70%;/* 1 items per row */ } } 

 <div class="container" role="main"> <ul class="list"> <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 <BR/> shorter than this :)</div> <div class="locationbox">Location</div> <div class="pricebox">Price</div> </a> </li> <li class="list__item"> <figure class="list__item__inner"> <p class="vignette" style="background-image:url(https://upload.wikimedia.org/wikipedia/commons/c/ce/James_Wadsworth_Rossetter_House_Front_1.jpg)"></p> <div class="titlebox">Thisssss Lineeeeee is longer too</div> <div class="locationbox">Location</div> <div class="pricebox">Price</div> </a> </li> <li class="list__item"> <figure class="list__item__inner"> <p class="vignette" style="background-image:url(http://www.mytickerz.com/wp-content/uploads/prairie-style-house-plans-2.jpg)"></p> <div class="titlebox">This line is shorter likeeeeeeeee it should be</div> <div class="locationbox">Location</div> <div class="pricebox">Price</div> </a> </li> </ul> </div> 

I'm not really sure if there is any way to limit the top line width. The only way I can think of, is to add a <br/> tag in a place where you would like to break down the title and then just set the text-align: center; for the .titlebox .

<div class="titlebox">This line is <br/> longer than this line</div>