Yor*_*llo 4 html css html-table
我想制作一些带有分隔线的自定义标题。最大宽度文本我设置为 40%，行分隔符显示在文本后面。主要思想是，如果文本少于 40%，则行从文本结束处开始，但如果文本大于 40%，则会换行。
不幸的是，如果我不使用white-space: nowrap;文本 - 分隔线会使我的文本崩溃，但当我使用时white-space: nowrap max-width: 40%则不起作用。我哪里错了？
更新。我只想当文本很大时 - 它填充所有最大宽度，并且分隔线从 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>使用 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>