Re: Define <br> by CSS means?

Am 21.07.2012 um 09:31 schrieb Simon Sapin:

> Le 21/07/2012 07:30, Andrew Fedoniouk a écrit :
>> 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?
> 
> 
> Hi Andrew,
> 
> You can do as Lea said to have something behave like <br> in CSS. In fact that’s how <br> is implemented in some UAs.
> 
> Also note that in your markup, there is whitespace before and after each <span>. So you will most likely get the max width of "1 2 3" and "4 5 6". I’ve seen work arounds like this:
> 
> ...</span><!--
>   --><span>...
> 
> -- 
> Simon Sapin
> 
> 

Hello,

I dont know the usecase of Andrew.

But I would like to put into game, that within these spans you assumingly have originally put some text content (here its your numbers 1,2,3,4,5, etc).

whats wrong formatting text content with a break in the html-markup, semantically defined within a paragraph?

Is "CONTENT" here seen as "LAYOUT"??

// --> Please, stick to the concept of seperating content and presentation in those situations.


If it is "LAYOUT" your are speaking of and seeing this where the problem originates from, then those objects you put now into a span, would be wrapped within a div, because its presentation.
Then these divs you could let float, and on the third element, where you want the break happen, you would stop the flow with a float:none.

Dont be cleaner than clean... just in order of some technical fetish.

I feel totally unsafe with workarounds Simon suggested.... we wanted to minmize mark up right? Why put in there comments to prevent a white space?

With these inner elements floating, as I have described, you wont have a white space problem at all... the float is neutralizing/terminating the white space fill up at the end of each tag.

Your feedback and thoughts are welcome....


Cheers
Dennis

Received on Saturday, 21 July 2012 11:30:22 UTC