Menu
I want to make some custom headers with separator line. Max width text I setup as 40% and line separator is shows after text. Main idea was if text less then 40% line is starts where text is end, but if text larger then 40% it wraps.
Unfortunately if I don't use white-space: nowrap; to text - separator line is crash my text, but when I use white-space: nowrap max-width: 40% is not working. Where I'm wrong?
upd. I just want when text is large - it fill all max-width, and separator line starts from 40%, but when text is small - separator line starts from text ends, not from 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>
205
use 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>old approach
use width instead of max-width because you are using 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>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
