Re: Define <br> by CSS means?

Where in your original question did you mention anything about the spans being inline-blocks?!
With spans at their default inline display mode, it works fine. And yes, I've tried it, plenty of times.

Lea Verou (http://lea.verou.me | @LeaVerou)

On Jul 21, 2012, at 10:29, Andrew Fedoniouk wrote:

> On Fri, Jul 20, 2012 at 11:44 PM, Lea Verou <leaverou@gmail.com> wrote:
>> You can do it already, almost as easily, with something along the lines of:
>> 
>> div>span:nth-child(3)::after {
>>        content: '\A';
>>        white-space: pre;
>> }
>> 
> 
> I don't think this would work at all. Did you actually try this approach?
> 
> Implementation experience tells me that element that contains line
> feed is conceptually far from what <br> does.
> 
> In any case I cannot manage this to work.
> I would appreciate if you will point where I am wrong here:
> 
> <html>
>  <head>
>    <style>
> 
>      .some-span {
>        display: inline-block;
>      }
> 
>      .some-span > * {
>        display: inline-block;
>      }
> 
>      div>div:nth-child(3)::after {
>        content:'\A';
>        white-space: pre;
>      }
> 
>    </style>
> 
>  </head>
> <body>
> 
> <div class="some-span" style="border: solid 1px #cccccc;">
>    <div style="width:91px;height:36px;background-color:#ff0000;"></div>
>    <div style="width:91px;height:26px;background-color:#ffff00;"></div>
>    <div style="width:91px;height:47px;background-color:#3366ff;"></div>
>    <div style="width:91px;height:26px;background-color:#ffff00;"></div>
>    <div style="width:91px;height:36px;background-color:#ff0000;"></div>
> </div>
> 
> </body>
> </html>
> 
> The blue block should be last one in line.
> 
> I can make it work though by inserting <br> this way:
> 
> <div class="some-span" style="border: solid 1px #cccccc;">
>    <div style="width:91px;height:36px;background-color:#ff0000;"></div>
>    <div style="width:91px;height:26px;background-color:#ffff00;"></div>
>    <div style="width:91px;height:47px;background-color:#3366ff;"></div>
> <br><div style="width:91px;height:26px;background-color:#ffff00;"></div>
>    <div style="width:91px;height:36px;background-color:#ff0000;"></div>
> </div>
> 
> -- 
> Andrew Fedoniouk.
> 
> http://terrainformatica.com
> 
> 
>> Lea Verou (http://lea.verou.me | @LeaVerou)
>> 
>> On Jul 20, 2012, at 22:30, Andrew Fedoniouk wrote:
>> 
>>> Let's say we have this markup:
>>> 
>>> <div>
>>>  <span>1</span>
>>>  <span>2</span>
>>>  <span>3</span>
>>>  <span>4</span>
>>>  <span>5</span>
>>>  <span>6</span>
>>> </div>
>>> 
>>> and the desire to see these spans broken into two lines:
>>> 123
>>> 456
>>> 
>>> with div style defined as:
>>> 
>>> div { max-width: max-content; border:1px solid; }
>>> 
>>> so its width will be set set to max of widths "123" and "456".
>>> 
>>> Of course we can use <br> in markup between 3 and 4 but it is not CSS-ish.
>>> 
>>> Something like this:
>>> 
>>> div>span:nth-child(3) { line-break:after; }
>>> 
>>> probably?
>>> 
>>> --
>>> Andrew Fedoniouk.
>>> 
>>> http://terrainformatica.com
>>> 
>> 
>

Received on Saturday, 21 July 2012 19:33:48 UTC