Re: Define <br> by CSS means?

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 17:30:19 UTC