Word Wrapping Across Spans

[ctenden]

I am trying to accomplish the following:

I have 2 buttons each taking 50% width of a screen and are 40px high. They are right next to each other.

The text in the button like, but different for each button in length:

<span>This is a long piece of text that should wrap</span>
<span style='font-weight:bold'>when the screen is smaller</span>

Ideally the buttons should remain 40px in height when the word wrapping occurs – or – both should grow at the same time. Because the text is of different length, one may get larger before the other causing two different height buttons next to each other.

The text needs to be centered vertically and horizontally.

Flexbox would work except that the spans in the text cause the first span to wrap separately from the second span in the text. If I was allowed to join the spans the would solve my problem. I tried divs around the spans with no luck.

I could probably use a CSS-Table but I would have to force the height to the largest height the wrapping could take it so that both buttons are always aligned.

I’ve struggled for hours with this.

<div style="height:40px">
<a><span>Sign-in and make this long</span>&nbsp;<span>Logout</span></a>
<a><span>Sign-in and make this long</span>&nbsp;<span>Cancel</span></a>
</div>

Any guidance would be greatly appreciated.

Thank-you

[Shikkediel]

Without seeing any code, I’d do a vertical translate :

span {
position: relative;
top: 50%;
-webkit-transform: translate(-50%);
transform: translate(-50%);
}

And makes the buttons high enough for the text to wrap. As a final resort there’s always JavaScript.

[ctenden]

Unfortunately, this seems to wrap the text off of the button.

[Paulie_D]

Need code…it’s really not clear what this is trying to do.

[Author]

Posts