Multiline text with custom line styling

I shot myself in the knee when I designed the above style in Photoshop, foolishly believing I could easily achieve it with CSS. I was wrong.

I was only able to make it work by using Javascript, which is fine for my needs, but it somehow really pisses me off that I couldn't find a pure CSS solution.

So, a sort of a challenge: can you achieve the above design with CSS, assuming you don't know what the text content will be?

The rounded corners aren't necessary, just a bonus. The HTML structure should consist only of one containing element, e.g. the text wrapped in a H1.

3 answers

5
points

I've got a workaround for it, it's kind of backward and may require some unnecessary markup, but here it is.

The markup:

<body>
<div>
<div id="wrap">
<h1>
A very long text that should wrap onto multiple lines, because the body is too narrow.
</h1>
</div>
</div>
</body>

The css:

div{
    padding:1em;
    padding-top:0;
    padding-bottom:0;
    background-color:#000;
    width:1em;
    padding-right:0em;
    overflow:visible;
}
#wrap{
    width:300px;
    background-color:#fff;
    padding-left:0em;
}
h1{
    background-color:#000;
    color:#FFF;
    display:inline;
    line-height:1em;
    margin-left:0em;
}

Obviously the first trick is to set the header to inline, but as Jouni stated, that gives us problems with the padding. So to fix this we actually need the padding to be on the container element (the plain div in this case).

So the background on the div is set to black which gives the illusion of the padding to be on the header. But that gives us another problem, the whole container becomes black. To fix that we need to wrap the header in another div where the background-color is set to white; to mask out the first div. And the illusion is done.

However the right side padding is still not fixed and I don't really have any idea as to where to start with that one. And I'm also pretty shure that the CSS3-rounded cornes wouldn't work for this.

Answered over 7 years ago by Jim Kaneko
2
points

You could possibly do that with some <span>'s wrapped around each "line" inside the H1. Set the H1 width to the maximum width, set the span's background colors, then their display to block.

A little more work than needed, but it would probably achieve the effect you're looking for. You could then set the rounded corners using CSS3 Rounded Corners.

Answered over 7 years ago by Nathan DeGruchy
  • Yup, that's what I did with JS. The problem is that I do not know what the text content will be, where the line breaks will appear. Jouni over 7 years ago
  • so surely the answer is to somehow come up with a bit of js that sensibly estimates where those spans should go and injects them, based on a number of characters/spaces to each line. nine_toes about 7 years ago
Jouni 0
0
points

I guess I should point out that display:inline is not what I'm looking for. It does not apply the paddings evenly, otherwise it could probably suffice for my needs.

Answered over 7 years ago by Jouni