1

I have a div with 2 spans inside. If the first span content is short enough to be displayed on a single line the span width (in dev tools) is the same width as the text content. That positions the second span directly to the right of the first span.

If the content of the first span is long enough to cause it to wrap the width of the span then becomes greater than the width of the content. Meaning there is extra space after the wrapped text. It forces the second span to be aligned to the right border of the parent div and width of the first span to take the remaining width.

Is there a way to have the multi-line spans width behave the same as the single-line span? I'm fine with the browser wrapping the multi-line text wherever it wants.

I added an image that shows what I'm trying to do. I want the second span to always be on the right edge of the box that is just wide enough to contain the text. On a multi-line first span the width would be just enough to contain longest line needed after wrapping happens. Like in the third example in the image. I was able to do it by manually specifying a width of the multi-line spans after the line wrap is done. I don't want to have to specify a width because that will be random based on the text.

div{
border:solid 1px green;}
<div style="width: 500px; height: 150px; display: flex">
  <span id="span1">kljlkajdl aldf di alkd falk afldin laknd flaid flkna dlfin laind flina ldf</span>
  <span id="span2">ABC</span>
</div>

<div style="width: 500px; height: 150px; ">
  <span id="span3">kljlkajdl aldkjf di alkd falk afldin laknd flaid flkna dlfinu lainduyvgcrdrses flina ldfina ldsfialdknfa dfoin a</span>
  <span id="span4">ABC</span>
</div>

enter image description here

T. Briley
  • 11
  • 2
  • either remove flex from the parent OR wrap both spans inside another span, p or div – DCR Apr 24 '21 at 15:40
  • I want the result to be that the 2 spans are top-aligned so the second span will be just right of the first span but both have the same top alignment. As the first span grows the first span can change width depending on how it wraps but the second span should be just to the right on the first span always. The 2 spans are more or less columns. Based on other feedback I don't think it is possible. I may try using a table or similar element and see if that will work. I just don't want to have to put hard widths on anything inside the parent div. – T. Briley Apr 25 '21 at 15:14
  • Tried the table and the same issue occurs. From reading some of the responses it appears the wrapping happens after the width of the the containing element has already been calculated. Doesn't appear to be a pure css solution is possible. – T. Briley Apr 25 '21 at 15:28
  • no idea what you are trying to do. can you provide some pictures of what you want? I added a border to your question. Take a look: where do you want to place the second span? – DCR Apr 25 '21 at 21:23
  • I added an image and some description. – T. Briley Apr 27 '21 at 10:24

1 Answers1

0

Remove flex from it's parent?

div {
  border: solid 1px green;
}
<div style="width: 500px; height: 150px; display: flex">
  <span id="span1">kljlkajdl aldf di alkd falk afldin laknd flaid flkna dlfin laind flina ldf</span>
  <span id="span2">ABC</span>
</div>

<div style="width: 500px; height: 150px; /*display: flex*/">
  <span id="span3">kljlkajdl aldkjf di alkd falk afldin laknd flaid flkna dlfinu lainduyvgcrdrses flina ldfina ldsfialdknfa dfoin a</span>
  <span id="span4">ABC</span>
</div>
vanowm
  • 9,466
  • 2
  • 21
  • 37