我想用分隔线制作一些自定义标题。最大宽度文本我设置为40％，行分隔符显示在文本之后。主要的想法是，如果文本少于40％行开始文本结束，但如果文本大于40％它包装。
不幸的是，如果我不使用white-space: nowrap;文字 - 分隔线会导致我的文字崩溃，但是当我使用white-space: nowrap时max-width: 40%无效。哪里我错了？
UPD。我只想要文本很大 - 它填充所有最大宽度，分隔线从40％开始，但是当文本很小时 - 分隔线从文本结束开始，而不是从40％开始..
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>
<body>
<!-- first example -->
<div class="addition-hr">
<table style="width: 100%; margin-bottom: 5px">
<tr style="width: 100%">
<td style="max-width: 40%; margin-top: 30px; margin-bottom: 30px; padding: 0 15px 0 15px; white-space: nowrap;">
<span style="position: relative"><b>Lorem ipsum dolor sit amet</b></span>
</td>
<td style="width: inherit; display: table-cell">
<table style="width: 100%">
<tr>
<td style="width: 100%; margin-top: 30px; margin-bottom: 30px; height: 1px; display: block;
background-image: -webkit-linear-gradient(right, rgba(0,0,0,0), rgba(160,160,160,0.75));
background-image: -moz-linear-gradient(right, rgba(0,0,0,0), rgba(160,160,160,0.75));
background-image: -ms-linear-gradient(right, rgba(0,0,0,0), rgba(160,160,160,0.75));
background-image: -o-linear-gradient(right, rgba(0,0,0,0), rgba(160,160,160,0.75));">
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
<!-- second example -->
<div class="addition-hr">
<table style="width: 100%; margin-bottom: 5px">
<tr style="width: 100%">
<td style="max-width: 40%; margin-top: 30px; margin-bottom: 30px; padding: 0 15px 0 15px; white-space: nowrap;">
<span style="position: relative"><b>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras cursus erat sit amet nibh fermentum, ut bibendum ex euismod. Cras at quam eu diam auctor feugiat. Nam sit amet urna ullamcorper nunc pellentesque iaculis. Aliquam nec sem ullamcorper, maximus ligula sed, venenatis sem.</b></span>
</td>
<td style="width: inherit; display: table-cell">
<table style="width: 100%">
<tr>
<td style="width: 100%; margin-top: 30px; margin-bottom: 30px; height: 1px; display: block;
background-image: -webkit-linear-gradient(right, rgba(0,0,0,0), rgba(160,160,160,0.75));
background-image: -moz-linear-gradient(right, rgba(0,0,0,0), rgba(160,160,160,0.75));
background-image: -ms-linear-gradient(right, rgba(0,0,0,0), rgba(160,160,160,0.75));
background-image: -o-linear-gradient(right, rgba(0,0,0,0), rgba(160,160,160,0.75));">
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
</body>
</html>
答案 0 :(得分：2)
使用flexbox
.flex {
display: flex;
align-items: center;
}
.flex.wrap >div:first-of-type {
flex: 0 40%;
}
.line {
flex: 1;
height: 1px;
margin: 0 0 0 5px;
background-image: -webkit-linear-gradient(right, rgba(0, 0, 0, 0), rgba(160, 160, 160, 0.75));
background-image: -moz-linear-gradient(right, rgba(0, 0, 0, 0), rgba(160, 160, 160, 0.75));
background-image: -ms-linear-gradient(right, rgba(0, 0, 0, 0), rgba(160, 160, 160, 0.75));
background-image: -o-linear-gradient(right, rgba(0, 0, 0, 0), rgba(160, 160, 160, 0.75));
}<div class="flex">
<div>test test</div>
<div class="line"></div>
</div>
<div class="flex wrap">
<div>test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test
test test test test test test test test test test </div>
<div class="line"></div>
</div>
旧方法
使用width代替max-width，因为您使用的是table
table {
width: 100%;
margin-bottom: 5px
}
.td1 {
width: 40%;
margin-top: 30px;
margin-bottom: 30px;
padding: 0 15px 0 15px;
}
.td2 {
width: inherit;
display: table-cell
}
.td2 td {
width: 100%;
margin-top: 30px;
margin-bottom: 30px;
height: 1px;
display: block;
background-image: -webkit-linear-gradient(right, rgba(0, 0, 0, 0), rgba(160, 160, 160, 0.75));
background-image: -moz-linear-gradient(right, rgba(0, 0, 0, 0), rgba(160, 160, 160, 0.75));
background-image: -ms-linear-gradient(right, rgba(0, 0, 0, 0), rgba(160, 160, 160, 0.75));
background-image: -o-linear-gradient(right, rgba(0, 0, 0, 0), rgba(160, 160, 160, 0.75));
}
.tbl1 .td1 {
white-space:nowrap;
}<!-- first example -->
<div class="addition-hr">
<table class="tbl1">
<tr style="width: 100%">
<td class="td1">
<span><b>Lorem ipsum dolor sit amet</b></span>
</td>
<td class="td2">
<table>
<tr>
<td>
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
<!-- second example -->
<div class="addition-hr">
<table class="tbl2">
<tr style="width: 100%">
<td class="td1">
<span><b>Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet </b></span>
</td>
<td class="td2">
<table>
<tr>
<td>
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>