0

This is what I am trying to achieve,

> Variable Length Title:    A sentence worth of text that may or may
                            not wrap depending upon the width of the
                            container.

                            This is the text that is not in the
                            summary tag but still is in the details
                            tag therefore hidden unless clicked on.

The html looks something like,

<details>
  <summary>
    <span class="left">Variable Length Title:</span>
    <span class="right">
      A sentence worth of text that may or may
      not wrap depending upon the width of the
      container.
    </span>
  </summary>
  <p>
    This is the text that is not in the
    summary tag but still is in the details
    tag therefore hidden unless clicked on.
  </p>
</details>

An inelegant solution I can think of is setting a generous width to .left with display: inline-block; and left padding for details p but this still leaves me with the issue of text wrap where wrapped text starts at the beginning of the line.

If possible then I am looking for CSS only solutions.

scribe
  • 673
  • 2
  • 6
  • 17
  • you could move the HTML a little and then create two flex columns (one with the "variable length title" and the other with the rest). It would be also way easier later down the line to do changes to it and style it – Jacck Mark Aug 03 '23 at 06:31
  • Are you saying what I think you're saying haha? – scribe Aug 03 '23 at 06:34
  • maybe I misunderstood your issue, but from my perspective reordering the html and adding solution with flex makes way more sense. But if you are bend on leaving alone html, then the solution that You yourself provided, would also work, but it would not be a pretty one – Jacck Mark Aug 03 '23 at 06:41
  • ok my bad. I was thinking that "details" is some kind of vuejs/angular component xd. Now (https://developer.mozilla.org/en-US/docs/Web/HTML/Element/details) it makes sense why you don't want to move it around :D – Jacck Mark Aug 03 '23 at 06:54
  • An upper-bound could be estimated, say `10em`. – scribe Aug 03 '23 at 07:11

2 Answers2

1

If you're allowed to change the HTML a bit, you could do something like this:

  • Duplicate the title as the previous sibling of the <p>.
  • Hide it but keep it's width using visibility: hidden;.
  • Wrap the duplicated title and the paragraph in a <div>.
  • Take advantage of grid.
  • Remove marker.

summary, div {
  display: grid;
  grid-template-columns: auto 1fr;
}

.visibility-hidden {
  visibility: hidden;
}

/* Hide marker */
details > summary {
  list-style: none;
}
details > summary::-webkit-details-marker {
  display: none;
}
<details>
  <summary>
    <span class="left">Variable Length Title:</span>
    <span class="right">
      A sentence worth of text that may or may
      not wrap depending upon the width of the
      container.
    </span>
  </summary>
  <div>
    <span class="visibility-hidden">Variable Length Title:</span>
    <p>
      This is the text that is not in the
      summary tag but still is in the details
      tag therefore hidden unless clicked on.
    </p>
  </div>
</details>
Amaury Hanser
  • 3,191
  • 12
  • 30
0

details{
position:relative;
margin-bottom:10px;
}
details > summary {
  padding: 4px;
  width: 200px;
  background-color: #eeeeee;
  border: none;
  box-shadow: 1px 1px 2px #bbbbbb;
  cursor: pointer;
  position:relative;
  left:0;
  width:300px;
}

details > div {
  background-color: #eeeeee;
  padding: 4px;
  margin: 0;
  box-shadow: 1px 1px 2px #bbbbbb;
  position:absolute;
  top:0;
  left:330px;
}
<details>
  <summary>Epcot is a theme park at Walt Disney World Resort featuring exciting attractions, international pavilions</summary>
  <div>
  <p>Epcot is a theme park at Walt Disney World Resort featuring exciting attractions, international pavilions, award-winning fireworks and seasonal special events.</p>
   <p>Epcot is a theme park at Walt Disney World Resort featuring exciting attractions, international pavilions, award-winning fireworks and seasonal special events.</p>
   <p>Epcot is a theme park at Walt Disney World Resort featuring exciting attractions, international pavilions, award-winning fireworks and seasonal special events.</p>
   </div>
</details>

<details>
  <summary>Featuring exciting attractions, international pavilions</summary>
  <div>
  <p>Epcot is a theme park at Walt Disney World Resort featuring exciting attractions, international pavilions, award-winning fireworks and seasonal special events.</p>
   <p>Epcot is a theme park at Walt Disney World Resort featuring exciting attractions, international pavilions, award-winning fireworks and seasonal special events.</p>
   </div>
</details>

Okay! you have to be very careful while using details > summary. If you are using large scale application then I would suggest you to use Tabs/Accordion/Collapse.

Here is CSS code:

details{
position:relative;
margin-bottom:10px;
}
details > summary {
  padding: 4px;
  width: 200px;
  background-color: #eeeeee;
  border: none;
  box-shadow: 1px 1px 2px #bbbbbb;
  cursor: pointer;
  position:relative;
  left:0;
  width:300px;
}

details > div {
  background-color: #eeeeee;
  padding: 4px;
  margin: 0;
  box-shadow: 1px 1px 2px #bbbbbb;
  position:absolute;
  top:0;
  left:330px;
}

Here is the updated HTML code:

<details>
  <summary>Epcot is a theme park at Walt Disney World Resort featuring exciting attractions, international pavilions</summary>
  <div>
  <p>Epcot is a theme park at Walt Disney World Resort featuring exciting attractions, international pavilions, award-winning fireworks and seasonal special events.</p>
   <p>Epcot is a theme park at Walt Disney World Resort featuring exciting attractions, international pavilions, award-winning fireworks and seasonal special events.</p>
   <p>Epcot is a theme park at Walt Disney World Resort featuring exciting attractions, international pavilions, award-winning fireworks and seasonal special events.</p>
   </div>
</details>

<details>
  <summary>Featuring exciting attractions, international pavilions</summary>
  <div>
  <p>Epcot is a theme park at Walt Disney World Resort featuring exciting attractions, international pavilions, award-winning fireworks and seasonal special events.</p>
   <p>Epcot is a theme park at Walt Disney World Resort featuring exciting attractions, international pavilions, award-winning fireworks and seasonal special events.</p>
   </div>
</details>
Syed Abdul Manan
  • 1
  • 1