How to make top line shorter than bottom line (inside div)

Question

I have an unordered list that contains 3 list items (presented in my example as 3 green fields). Each box has an image and 3 divs (name, location, price). I'm only interested in every div title.

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

I'm having problems ... it may take js to determine the length of the string, and then set the bottom line longer. Screen resolution is likely to play a role, but can I make the lines consistent across different screen sizes?

Here is one of the list items, I'm interested in the titlebox div:

<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 also:

Answer 1

Here is a JS solution that can work for you in most cases (I say most cases because text characters can have different 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 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 sure if there is a way to limit the width of the top line. The only way I can think of is to add the <br/> tag to the place where you would like to split the title, and then just set text-align: center; for .titlebox .

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