Boxed Hierarchical Text with Line Breaks

[Leximatica]

I’m trying to achieve this effect:

https://s10.postimg.org/wodai8j3d/BHTw_LB.png

Here’s a code snip to experiment with:

<div>
    <div>This</div>
    <div>is</div>
    <div>
        <div>a</div>
        <div>test</div>
    </div>
    <div>of</div>
    <div>
        <div>the</div>
        <div>
            <div>emergency</div>
            <div>broadcast</div>
        </div>
        <div>system</div>
    </div>
    <div>.</div>
</div>

The goal is to break the text and each of the enclosing nested boxes at some preset display width.

This is effect I’m trying to achieve is very obvious and simple to understand, but it’s proven to be a devil to accomplish using CSS. I think it may represent a fairly simple and useful effect that CSS is incapable of. But I really hope someone can prove me wrong with some clever coding.

Any takers?
Is this beyond the capability of CSS?

[Beverleyh]

The goal is to break the text and each of the enclosing nested boxes at some preset display width.

So the logic would be; Create the CSS you want on smaller screens… change it in a media query for larger screens.

You should show us what youve tried in a CodePen. Maybe create both views in separate pens first and then try to merge the views in a pen that demonstrates use of media queries. We can help with suggestions at that point.

[Author]

Posts