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>
