如何使顶线短于底线（在div内）
我有一个无序列表，其中包含3个列表项（在我的示例中表示为3个绿色框）。每个方框都有一个图像和3个div（标题，位置，价格）。我只关注每个盒子的标题div。
如果标题足够长以便产生2行，我希望顶行总是短于底线。我的演示网站here显示了方框1＆amp; 2，设置错误，框＃3显示正确的设置。
我遇到了麻烦......这可能需要js来确定行长，然后将底线设置得更长。屏幕分辨率可能会起作用，但我不能在不同屏幕尺寸上使线条一致吗？
以下是其中一个列表项，我对div＆＃34; titlebox＆＃34;感兴趣：
<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>
任何帮助都很棒，谢谢!!
附加截图：
2 个答案:
答案 0 :(得分：1)
这是一个可能在大多数情况下适合您的JS解决方案（我说大多数情况是因为文本字符可以有不同的宽度）。它基本上使用动态插入的<br>标记将您的句子分成2行。代码中的评论：
$(".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);
});
答案 1 :(得分：0)
＆＃13;
＆＃13;
＆＃13;
＆＃13;
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/>标记，然后为text-align: center;设置.titlebox。
<div class="titlebox">This line is <br/> longer than this line</div>
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？