Is there any alternative for bikeshedding CSS3 property? It doesn't seem to be supported yet.
There's always the most obvious fix, which is to simply remove the whitespace in the HTML:
http://jsfiddle.net/F3Mdd/1/ - it's really easy, and it just works. From this:
<div>a</div>
<div>a</div>
to this:
<div>a</div><div>a</div>
Here's a more detailed answer.
To be honest, I always just remove the whitespace...
The white-space property
In CSS3, The white-space property is a shorthand for the white-space-collapsing (I guess bikeshedding means they don't know what to call it yet) and text-wrap properties. The white-space property is a CSS 2.1 property supported by most browsers and there are two values for it that collapse new lines:
normal (The initial value).
nowrap
But what does collapsing line feed characters mean?
According to CSS 2.1:
If 'white-space' is set to 'normal' or
'nowrap', linefeed characters are
transformed for rendering purpose into
one of the following characters: a
space character, a zero width space
character (U+200B), or no character
(i.e., not rendered), according to
UA-specific algorithms based on the
content script.
According to CSS 3:
A zero width space before or after a
white space sequence containing a
newline causes the entire sequence of
white space to collapse into a zero
width space.
Reality:
Most browsers transform line feed characters into a space. So what you really want is to set the white-space-collapsing property to discard not collapse or to collapse and then add a zero width space character before the line break.
What to do till browser support
Remove white-space from your HTML document:
<span>A</span>
<span>B</span>
To:
<span>A</span><span>B</span>
Or:
<span>A</span><span>
B</span>
Another approach is simply to wait for this CSS3 feature and remove the whitespace by Javascript until then.
http://jsfiddle.net/rT4Dy/2/
$('[data-bikeshedding="discard"]').each (function () {
var node = $(this);
node.html (node.find ('> *').detach ());
});
If I'm understanding you correctly, you mean the text-spacing property.
As far as I can tell, there isn't a lot of support.
Related
I display a piece of text taken from a text file in an HTML page, I want the new-lines in that text file to be taken into account so I am using "white-space: pre;". on the other hand, I want to prevent the text from overflowing outside its containing div, so I added "word-wrap: break-word;"
unfortunately, the two properties don't seem to work together (the white-space overrides the word-wrap). how can I make it so both properties work together?
According to the MDN doc page, this is the desired behavior for the white-space property:
pre
Sequences of whitespace are preserved. Lines are only broken at newline characters in the source and at <br> elements.
pre-wrap
Sequences of whitespace are preserved. Lines are broken at newline characters, at <br>, and as necessary to fill line boxes.
So, to obtain what you described, you need to use the value pre-wrap in place of pre.
How is it possible for CSS to recognize a space as a error?
This will work, for example:
height: 50px;
But this doesn't work?:
height: 50 px;
Can someone tell me why this is the case? It was really hard to find this error in my CSS.
The W3C specification states that, for CSS Level 3, all non-zero values must be accompanied by a unit identifier, in this case px. Adding a space after the value is essentially the same as not adding a unit identifier at all. The CSS specification treats a space as an instruction that the browser should stop interpreting that property and move on to a new line or property listing.
body {
font-size: 50 px;
}
is not okay, since the CSS is interpreted as:
What is the element? Body. Interpret according to spec if possible. There's a space; move on to the next line or property. What is the property? Font-size. This property needs a value. What is the value of the font-size property? 50. Interpret according to spec if possible. Move on to the next line or property. Next line says px;. etc. etc.
So your CSS will be interpreted by the browsers in this way. The specification allows for a space or no space between a property and a unit (size:50px; vs size: 50px;), so browsers have a use-case for either of those situations. If there is a space between a unit and a unit identifier (size:50 px;), there is no use-case for that, as it is not allowed by the spec. The browser doesn't understand what to do and moves on; the style is not applied.
CSS doesn't really error. It either works or it doesn't. height: 50 px doesn't work because it doesn't know how to interpret 50 px.
The value (50 in this case) and unit (px) should be next to each other withour any space in between. But the space between 50 and : is not important and is just for decorative purposes.
height: 50 px;
Doesn't work because the browser doesn't know how to interpret it. Browsers interpret CSS according to the specification...
Just because its a space doesn't mean its okay to put it there. For example what if you did this in PHP
$var iable = 1;
Regardless of if you think its right or wrong you have to code to the specification no matter what language you are using
I have a div and all the long words (without spaces) flow outside the div.
Please don't mark the question as a duplicate of How to prevent long text from flowing out of a container or Long words are flowing out of the box - How to prevent?, where the problem is solved by using word-wrap: break-word;.
The disadvantage of word-wrap: break-word; is that it also breaks short words which are at the edge of the div, in a way that disrupts the flow of the text. I want short words to remain the way they are and only break the long words. Is it possible to implement this? How do other websites handle it?
it also breaks short words which are at the edge of the div
That's not true...word-wrap: break-word; shouldn't do that.
Perhaps you're confusing this with the word-break: break-all; property (which doesn't work in all browsers).
See this jsfiddle for a comparison:
http://jsfiddle.net/Snu8B/3/
For firefox you could try the hyphens property.
If you are willing to "hide" the words you can play with overflow:hidden
.mydiv {
height : youchoose;
width : youchoose;
overflow: hidden;
}
Otherwise:
word-wrap : normal|break-word;
normal : Break words only at allowed break points
break-word: Allows unbreakable words to be broken
word-break: normal|break-all|hyphenate;
normal : Breaks non-CJK scripts according to their own rules
break-all : Lines may break between any two characters for non-CJK scripts
hyphenate : Words may be broken at an appropriate hyphenation point
Page in question: http://www.rjlacount.com/public/lander/
I'm probably just doing something stupid, but I'm trying to indent the second line of wrapping text inside the form (with "Your account: test#test.com" at the top) and I can't seem to get anything to work.
I would think the solution is:
form span {padding-left:1.5em;text-indent:-1.5em;}
but this only seems to indent the first line of each section.
Another look at this would be much appreciated, thanks!
If the element is inline it will indent the first line, otherwise if it's a block element it will indent the rest of the lines, which is just like Briguy37 said, since that's the difference between DIV and SPAN.
I just wanted to clear out that it's not a "problem with span".
For some reason, this works with a DIV, but not with a SPAN. Not really sure why, but here's a fiddle with the same CSS for both.
spans are handled as inline elements.
Considering them as actual characters helps to conceptualize the changes. A space after a span is retained because it's like a space between characters. You adjust height by line-height rather than simply height. etc etc
Usually if this is causing a problem you can just use a div and set display:inline-block; if you need horizontal alignment.
I have a set width and the height is set to auto.
Each row is a div, inside is a div for each column. and there is a <p> tag inside the column divs where text should be.
The CSS involved is very basic, just some padding and set width/heights...
and float left.
Something I'm missing?
It's actually expected behavior for your code. You have a single "word" in your "cell", with no spaces in it. So browser doesn't know where to wrap and automatically extends the box. You should add word-wrap: break-word CSS rule to .orderHistoryTable selector (or to orderHistoryTable div.row1 if you want this behavior only on this cell)
http://jsfiddle.net/d2Amf/
Did you try setting the CSS overflow property?
http://www.quirksmode.org/css/overflow.html
I live and breath by the Clearfix method. It will solve many of your layout problems w/ divs. It might solve this issue you're having, or might not, but overall it's great to use when doing div heavy layouts. I use Jeff Starr's method from Perishable Press: http://perishablepress.com/press/2009/12/06/new-clearfix-hack/