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

Question

我有一个无序列表，其中包含 3 个列表项（在我的示例中表示为 3 个绿色框）。每个盒子都有一张图片和 3 divs (title,location,price)。我只关心每个框的标题 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

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>

我不确定是否有任何方法可以限制顶部线宽。我能想到的唯一方法是在您想分解标题的地方添加一个 <br/> 标签，然后为 .titlebox.[= 设置 text-align: center; 16=]

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

Answer 2

这是一个在大多数情况下可能适合您的 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);
});

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

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

html

javascript

jquery

string-length