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.
Related
I'm making a rich text editor which is like a clone of Google Docs. For reasons I won't get into here, each line in the text editor is wrapped into its own div container. For example, if there's 3 lines of text, there will be 3 child "line nodes" (rendered as an unstyled div) in the text editor. And within each line node there are inline span elements to control styling such as Bold, Italic, etc.
The issue I'm having is I can't understand why there is an unsightly vertical gap of whitespace between each line when selecting text over multiple lines. I am using Draft.js for this, but from what I can see it shouldn't make a difference; there's no styling or margins applied. I've even tried making every line div and its span elements exactly the same height but the problem persists.
My guess is this is caused by some native browser behaviour. All I really care about though is: can I "fix" it? I mean, I know it's possible because Google Docs doesn't have this spacing issue when selecting text... But then again it uses a completely custom rendering engine with custom cursors too. Thanks for any suggestions
edit: so a temporary workaround I've found (see image below) is to reduce the height of each div and span to a fixed value (in this case, height: 16.4px). But for obvious reasons, this isn't an ideal solution. I'm still looking for a "proper" way to implement whatever styling I want and not have these gaps appear between adjacent divs when selecting text
I believe your talking about line-height in which you can control the space between two elements / texts.
Try it out below:
div {
line-height:100px;
}
<div>Hello World!</div>
<div>How are ya?</div>
Thank you for all the suggestions. Turns out this is quite a challenging issue and there's very little (if anything) that can be done with pure CSS. Only the height attribute of div or span elements appear to have any visible impact on text selection. Inspecting the Google Docs elements reveals they use their own custom selection engine:
Closing this because I at least know how a solution might be implemented now, even if it would be very complex and time-consuming. Thanks again for the suggestions.
CSS aligns the text in the middle of the line, but I'd like to have the text aligned to the bottom of the line. Best explained with a picture:
Like it should be:
https://lh5.googleusercontent.com/-L1TBqTxEVHI/UDPVEOnFY7I/AAAAAAAAAH4/GHZHt776wmg/s145/CD-Manual_Stand_Mai_2011_Verlinkungen.pdf%2520%2528Seite%2520135%2520von%2520248%2529.jpg
Like it is:
https://lh6.googleusercontent.com/-0SiQqqkHD9k/UDPVNvTA2NI/AAAAAAAAAIA/2VudybQxnDE/s45/CSSEdit.jpg
Vertical-align doesn't work, it does only work for nested elements and not the entire text. Where's the trick? :)
Here is the code: jsfiddle.net/vmadd
Try line-height: 100%
that should fix you problem.
I don't actually see what you are after. There is no such thing as a baseline alignment or something in standard css (to my knowledge). I don't realy see what that would change in the layout eather.
As for the footer, if you just want some more space between the line and the text, there are plenty af ways to achieve this. Something like this:
div.layoutGridBottom p {
padding-top: 10mm;
}
Should do the trick. Or even better, declare a special class for things you want to have some top padding, and apply it to the elements you want. As said, there are dozens of ways to achieve this (line-height, margin-top, insert blank div, make the line have padding bottom, ...) If you wrote that css yourself, I'm surprised this causes you problems...
I was able to get three div's in a row, no sweat. Where the problem lies when the site is done some pages have text in the center column, however when i start typing the text spills over into the other divs..... The text doesn't wrap (stay in that div)
I'm sure I am probably missing one little dumb thing but any help would be greatly appreciated!
I uploaded a test of it for you guys to see:
http://graves-incorporated.com/test_sites/solera_new/test3col.html
and with the text spilling onto the next div:
http://graves-incorporated.com/test_sites/solera_new/test3col_2.html
I think you worry about nothing. Words like
Stufffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffdddddddddddddddddddddddddddddfffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff
are not found in many languages. You will see if you put normal language in your div, the text will not overflow at all
You could always use CSS's word-wrap CSS Word-Wrap example.
Or PHP's wordwrap() function PHP Word-Wrap example.
There are various ways you can approach it, but that should set you off in the right direction :)
I Think you must use a proper language then it will not go out of Div's Width , Becase your DIV is already in a Fixed Width.Just use another the good words instead of stuuuuuuuuuuuufffffffff. It will work fine then :).
overflow: hidden will help prevent it from breaking the layout, although some content may be hidden. I would suggest word-break: break-all, but that has a tendancy to break words unnecesarily.
So I'm using the OOCSS media module and I'm putting a link inside of it and the last line of the link is being cut off.
To explain for anyone who doesn't know about the framework, it's simple to explain: imagine an element with overflow: hidden, and a link inside that element. That's ALL.
If I put a link inside of this element with overflow: hidden, the last text-decoration line of the link is cut off thanks to overflow: hidden. Without having to resort to padding & margin (and hopefully floats) is there anyway to compensate for that last line being cut off? Chrome seems to get this right, not sure though.
Actually there was another question very similar to this recently, you can see my answer there: Html anchor height issue with unitless line heights
So I don't think there's a solution to your question, but I wanted to note that while Chrome gets it right for overflow hidden, when you use overflow auto it's actually a problem as you'll see in that post.
try to set the line height on the text
line-height:1.5;
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/