Re: Define <br> by CSS means?

On Sat, Jul 21, 2012 at 12:33 PM, Lea Verou <leaverou@gmail.com> wrote:
> 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.

Terribly sorry, forgot to mention about display:inline-block; used.

Actually that just highlights the problem with your method: it is
sensitive to display:inline and display:inline-block | inline-table |
etc.

So far I didn't find the way of forcing line break on
display:inline-block elements by CSS means solely.
That's why my question.

-- 
Andrew Fedoniouk.

http://terrainformatica.com

>
> 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 20:16:49 UTC