I am a relatively new coder and I suspect what I am trying to do, cannot be done in CSS, but I thought before I wave the the white flag I would check with the guru’s here.
Here’s an example that will help me explain what I am trying to do.
I want to have text on a layer above a container that has a border box and an image inside. The text however might be wider than the container, so it might wrap to 2 lines. The issue right now, is that if I make the background white for the existing text, then if it wraps, the full width of both the top and bottom lines will be a white background, which is not something I want.
I also want this all to be responsive, as under 600px screen width, I have different sizing for the box and the text.
I want the background behind the bottom row of text to be white – if there there is a top row then I want it to be transparent.
I first tried to experiment with text-shadow, adding a solid outline of white and then adding a white blur, however there are still too many areas where the gray border from the border box still pops through.
I plan to convert my current format to a grid format, but for now here is the code I have used:
The only possible way I could think if doing this, would be to:
Have a top grid layer on top of the square container (bottom layer).
The grid layer would contain 3 rows. The top row would be blank. The second row would have a transparent background. The third row would have a white background.
I would probably need to find a way to use javascript (I am just learning the basics of it now) to detect if the text line is greater than the width of current box. If it is greater, then it would break the text into 2 different lines of text, to be placed on grid rows 2 and 3 respectively.
I was just curious if anyone has ever come up with a method for doing this? It is not critical to my website, so I may just have to come up with a different design plan, but if there is a way to make this work, I would greatly appreciate the guidance.
That would almost work except the background covers the whole element so you can’t use the transparent value on the first line because then you see the other background. It won’t rub it out as such.
You could use two different colours and then that would work but then that defeats the desired result unfortunately.
There are ways of making the background cover just the last line but there isn’t a way to make the background stay on the wrapped text only (the background will be as wide as the longest line).
That would have been my thought as it just looks wrong with the text going over the border.
Ideally, I do want the text to be aligned at the bottom of the box, so I do want the last line to always cover the grey border box. I really like the appearance that way.
The box sizes have to be fixed, as there will be several of them, and I want them to all appear the same size, so having the box re-size is not a viable option for me.
Ideally I was hoping there was a way to have a white background color just appear behind text (including spaces) but would not be the full width, in the case of wrapped lines of text.
The links will be generated with PHP, so now I will look into how I can use PHP to split the text into 2 lines, if it over a certain character limit. This will involve PHP finding the last “space” before the desired break point – something I have never done with PHP before, but I’m sure a Google search will yield multiple examples of how to do this.
Doesn’t that defeat what you wanted to do because the white will be behind all the text and I thought you just wanted it on the bottom line?
If you don’t mind the top line being white also then you can add a span in the html and just have the background behind the text and not as a box around all text.
e.g.
With flexbox you can make all boxes in the row the same size as the largest box in that row.
That is very, very close to what I would like to do, however I would like for the top line to have no background (fully transparent).
In most cases, the text will be over top of a graphic (the one pictured in the codepen example has a lot of white space on the top and bottom but most do not). However in saying that, I do now realize if the top line were transparent, then there still would be some distortion from the background image between the characters of the top line.
I think this solution that you provided might be my best option moving forward – and thank you greatly for it.
Until today, also have never been aware of the ::first-line selector, so I may even try to experiment with that and the code you provided to see if I can achieve my original intent of having the first line background transparent. However, as mentioned above, I suspect I will likely just go with the solution you offered.
I will also do some reading up on “box-decoration-break:” as I also was unaware of that, and it seems like a very useful element. Thanks again!
It won’t rub it out as such.