CODEWITHSUNDEEP
htmlcss
Leos Literak
Leos Literak

Reputation: 9474

Set HR to be as long as text above it

Is it possible to set HR length dynamically? I would like it to be as long as the text above it.

http://jsbin.com/dozedenogi

sample

<html>
<head><style>
    table { border-collapse: collapse; }
    table, th, td { border: 1px solid black;  padding: 10px;}
</style></head>
<body>
    <table class='rule level_1'>
    <tr>
        <td>
            Lorem ipsum
            <hr>
            Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
        </td>
    </tr>
    <tr>
        <td>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit
            <hr>
            Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
        </td>
    </tr>
    </table>
</body>
</html>

Upvotes: 1

Views: 257

Answers (4)

Wilq
Wilq

Reputation: 2272

Yes it's possible, you should wrap your text and <hr> element in a <div> with display: inline-block CSS property to make the div as long as the text is.

For example:

<div style="display: inline-block">
  Lorem ipsum
  <hr>
</div>

Here is a working snippet with your code:

<html>
<head><style>
    table { border-collapse: collapse; }
    table, th, td { border: 1px solid black;  padding: 10px;}
</style></head>
<body>
    <table class='rule level_1'>
    <tr>
        <td>
        <div style="display: inline-block">
            Lorem ipsum
            <hr>
        </div>
        <br>

        Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
        </td>
    </tr>
    <tr>
        <td>
        <div style="display: inline-block">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit
            <hr>
        </div>
        <br>

        Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
        </td>
    </tr>
    </table>
</body>
</html>

Upvotes: 4

G-Cyrillus
G-Cyrillus

Reputation: 105953

hr could be avoided and turned into br or hidden and a border like can be drawn via background.

Result is similar to an underline with an hr look (color can be different from text too)

table {
  border-collapse: collapse;
}

table,
th,
td {
  border: 1px solid black;
  padding: 10px;
}

td:first-line {
  background: linear-gradient(to top, lightgray 1px, black 2px, transparent 2px);
  line-height: ; /* reset this if needed see example next  */
}

td hr {/* hide hr if there */
  width: 0;
}
code {font-weight:bold;color:gray;}

.lh:first-line {line-height:3em;}
<table class='rule level_1'>
  <tr>
    <td>
      hide <code>hr</code> below
      <hr> Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
    </td>

  </tr>
  <tr>
    <td>
      <code>BR</code> might be used for the line-break
      <br> Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
    </td>
  </tr>  <tr>
    <td class="lh">
      <code>BR</code> used + line-height on <code>:first-line</code>
      <br> Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
    </td>
  </tr>
</table>

Upvotes: 0

Bram Vanroy
Bram Vanroy

Reputation: 28473

This is probably a better way, without using a HR.

table span {
  display: inline-block;
  padding: 8px 0;
}

table span:first-child {
  border-bottom: 1px solid black;
}
<table class='rule level_1'>
  <tr>
    <td>
      <span>Lorem ipsum</span>
      <span>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</span>
    </td>
  </tr>
  <tr>
    <td>
      <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit</span>
      <span>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</span>
    </td>
  </tr>
</table>

Upvotes: 1

D. Pachauri
D. Pachauri

Reputation: 244

HR can't do this, wrap the text in span and user border-bottom with padding bottom instead.

Upvotes: 0

Related Questions