0

I'm trying to make vertical-align:top works in this example:

.container {
  width: 200px;
  white-space: nowrap;
  background-color: #E6E9F0;
  border: solid 1px black;
  vertical-align: top;
}
dt,dd {
    display: inline-block;
}
dd {
    white-space: break-spaces;
    margin: 0;
}
dt {
    margin-right: 6px;
}
<dl>
  <div class="container">
    <dt>Text</dt>
    <dd>Very very veeeeeeeeeeeeeery veeeeeery very very very long text</dd>
  </div>
</dl>

As you can see it doesn't work, another issue is that the content gets outside the container.

How can I solve this ?

Renaud is Not Bill Gates
  • 1,684
  • 34
  • 105
  • 191
  • [not the answer] Oh, inline-block for this issue... inline-block has [whitespace issues](https://stackoverflow.com/questions/5078239/how-do-i-remove-the-space-between-inline-inline-block-elements) between elements so you'll need to think on that also. My 5 cents - use flex or grid, you'll be a lot happier :) – Vucko Dec 10 '20 at 19:11
  • vertical-align: top; need to be added to dt,dd not the container – Temani Afif Dec 11 '20 at 02:00

3 Answers3

0
dd {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100px;
}

try using css ellipsis and add vertical align - top to dt

dt {
vertical-align: top;
    margin-right: 6px;
}
Kunal Vijan
  • 425
  • 2
  • 9
  • 28
0

.container {
  width: 200px;
  background-color: #E6E9F0;
  border: solid 1px black;
  vertical-align: top;
display: table;
}
dt,dd {
    display: table-cell;
}
dd {
    white-space: break-spaces;
    word-break: break-all;
    margin: 0;
}
dt {
    margin-right: 6px;
}
<div class="container">
  <dt>Text</dt>
  <dd>Very very veeeeeeeeeeeeeery veeeeeery very very very long text</dd>
</div>
Sonu Nigam
  • 279
  • 1
  • 7
0

you can use just display: flex.

Example here: https://codepen.io/yasgo/pen/oNzYLdN

Yasin B. Kalkan
  • 267
  • 1
  • 9