I'm looking to display a centered message in a "bubble", with two decorative lines flanking it. Something like this:
----------- Message -----------
Message can be of dynamic width and isn't controlled by me. If it reaches a maximum width, it should move onto a new line. If it's not as wide as that maximum width, the "bubble" should shrink to its size. The width of the whole container that fits the three columns is known.
My research lead me to believe that using display:table is the best solution to a problem like this, especially since I want to vertically align the decorative lines. I've found a ton of related similar questions but none that exactly get it. This one is the closest(jblasco's solution), but it doesn't work - as soon as you add a maximum width it stops working as desired.
Here's a JSFiddle showing what I've come up with. The "Short Message" should not have that whitespace to the right, and any solution should not modify how the "Long message" is displayed.
Best How To :
Ah pesky IE8 support .... I was about to fire with flexbox all over, but since you need that to work on IE8, some other method must be used.
Table trick won't really cut it, max-width/min-width issues, that bubble won't really expand/shrink, although might be useful if you want to change your bubble to fixed width.
I believe :pseudo elements are supported in IE8, so why not use those to achieve what you're looking for. However this method has its downfalls: you'll need to mask out the edges of the lines with some background, in this case I used #fff, or white background to mask em.
So what I did was the following:
- wrap everything related to the bubble, in a container, I used
- the content itself wrap it in a class, say
- set the container to relative positioned & text-align center
- use a
:before class from the container to position absolute, 50% from the top, 1px height and your desired background: this is going to act like the '2 lines' required
- now the content itself set it to display inline block so it would be sent to the middle of the container, and use some max-width on it to where you need it to expand
- since your content neeeds to have that border around it, we'll need to use here both
:after elements from it
- set the content to position relative, and the pseudo elements from above, to absolute positioned, so theyll be bound to their parent and not to the container
- set the background to white color, and position one to the left and one to the right, so theyll act like a mask over the line, to give the impression of some space between the lines and the bubble itself
- and thats about it.
This should work out properly in IE8, not sure about border-radius, but the shrinking/expanding stuff should work.
Check out the demo here or the snippet bellow and hope this helps you
margin: 20px 0;
/*your desired color for the line*/
/*the width of the bubble that it will reach untill it will break to the next line*/
/*so it wont show the line behind it*/
border: 1px #666666 solid;
/*mask out the edges of the bubble*/
/*bellow are the mask for the line, you can play around,
width left/right props depending on how much space you need
between the edges of the bubble and the lines*/
/*the mask on the left*/
/*the mask on the right*/
<h1>Pseudo elements and mask the line</h1>
This one is really short, no problems here, move on
This one is kinda long, but not really too long so we wont spoil it
This one is really long, you could write a novel maybe here, and still have some room for some funky text wrapping on the next line, right?
Now you went too far, this bubble seem to expand nonetheless, and still wrap line after line, after line ... Notice that the left and right lines stay in the middle? Now thats some funky stuff, eh?