On a new project I get some unexpected behavior: When the sidebar is quite small (about 200px) , line breaks occur earlier than needed.
On this image you can see the result (Safari 6.0.2, similar results in other brothers), the left arrow where the word is, the right arrow where the word should be (in my opinion).
example http://fitzskoglund.jensravens.de/screen.jpg
You can find the whole website http://fitzskoglund.jensravens.de to the see effect and CSS.
I cannot attach a special snippet because I don't know where this style or behavior comes from.
Thanks in advance for any advice.
It seems to be for lack of a "space" to break at. When I added a space at the end of this...
<strong>SCHULD SIND IMMER DIE ANDEREN </strong>
...or before this word (which follows the <a> wrapping the <strong>)...
ausgezeichnet
...it seems to work.
What it looks like is happening is the first space in a line is being treated as a ;nbsp, which is being printed as if there is no whitespace. That causes the two end words to be treated as one. If you were to place a single letter like 'a' before the space by the second word, it works, or place a second space in either line.
It looks like it has to do with the way you have your anchor and strong tags styled. They are interacting with the surrounding text in a weird way, causing it to break apart. When I inspect and remove the text after your anchor ("ausgezeichnet"), the anchor text snaps back into place: http://screencast.com/t/G1imlavU . I would remove what you can and keep the mark-up as simple as possible.
Related
Here, I put text inside the div created as follows.
<div>There are Sentences that start like this, go on like this, and end like this</div>
result
If you look at this text, 'and' and 'end' have line breaks.
Is it possible via css to make the line break appear as if it happened between 'and' and 'end' on any device without disabling the viewport? From any device, there should be a line break between 'and' and 'end', just like the text in the image. I want this text to look the same on mobile, desktop, and tablet.
If more text is added here, I'm thinking that the character position, punctuation mark position, and line break position will look the same on all devices.
I don't think you can ever guarantee it without setting specific widths.
However, there is an element <wbr> which is used to denote a position where a line break should (preferably) occur.
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/wbr
I have a table cell containing a paragraph of text. At the end of the paragraph I have a word count. Like this:
From The Analects of Confucious: The Master wanted to settle among the nine barbarian tribes of the East. Someone said: "It is wild in those parts, how would you cope?" The Master said: "How could it be wild, once a gentleman has settled there?" (44)
Depending on the zoom and page width and user's screen size, the last line will probably have some white space after it. I want the count to be positioned over to the right, after the white space.
I could list a few things I've tried, but why? since none of them worked at all.
Did you try using float:right on the word count element?
Is it possible to calculate if an element is at the start of a new line within a <p>? For example take a look at this screenshot:
You'll see that the Twitter button has a slight margin to it. This is fine when it's following a word, but I was wondering if there was a hidden CSS gem that'd allow me to say "if you're the first 'thing' on a line then lose your margin-left".
Edit: The answer was p button:first-child or p > button, but neither work. See the comments.
You might want to set the margin to 0 all the time and then make sure the button always has a space before it. (Edit: won't work either, since a space is not enough. Again, see the comments.)
It is possible to do this calculation programmatically using JavaScript, but I'm not aware of any CSS tricks that will do it for you.
The basic JavaScript algorithm for doing this is to append an invisible node to your document with the same text styling as your paragraphs of text. Then you gradually add text to it, checking its width after each addition to see where the linebreaks are. Then when you've worked out what the width of the final line is, you check to see if that width would put the twitter button on the next line by itself, and update the CSS styles appropriately to remove the margin. This needs to be done for each <p> on the page that includes a twitter button.
It's not the most straightforward approach (in fact, Mr. Lister's solution is far simpler and produces a comparable effect as long as the margin is not more than a few pixels wide), but it's not quite as bad as it sounds, either.
Here's an example:
http://jsfiddle.net/fBUnW/6/
I have a small space in which I would like to put writing. Problem is, if a long word is inputted, it flows off the side because there is no space.
I could do overflow:hidden, but this isn't what I am looking for. Ideally I would like the word to drop to a new line with a - before it.
The word is on a line of its own to begin with so a <br/> will not fix the problem.
word-wrap:break-word in CSS does this (ok, without the - in the newline), but it had some browser issues back when I tried it, so be careful ;).
Second solution is wrapping letters in text (or packets of 3 or 5 letters etc.)in <span></span> so that they'll wrap but have no spaces when fitting the line.
to add the hyphen You could then use jquery and search for elements having certain left offset to prepend hyphens.
Okay, so it seems, for some reason (I might be doing it wrong, obviously), that I have some problem wrapping continuous lines, using Asp.net.
Let's say I have 800 pixels worth of the "m" character, well, my table cell gets extended to that length. I don't want that, I want the cell to automatically break the continuous line after 300px.
To do that, I tried to apply the word-wrap:break-word css style. Didn't work. Now what?
Do I parse the line, to insert explicit linebreaks after a certain number of characters? That doesn't seem very clean to me. Any ideas?
You can insert a <wbr> (little known html element) every few m's. It's not 100% compatible with everything, but it works in most browsers:
<wbr> (word break) means: "The browser may insert a line break here, if it wishes." It the browser does not think a line break necessary nothing happens.
So you would do something like this:
mmmmmmmmm<wbr>mmmmmmmmmm<wbr>mmmmmmmmmmm<wbr> (etc.)
Here's some more info: http://www.quirksmode.org/oddsandends/wbr.html
Do you really have 800px of "m" or is that just test data? If that is real data then yes you will have to create some whitespace in there somewhere. HTML parsers don't wrap text that overflows an element unless that text has spaces in it that allow the text to be wrapped.
If the m's are a test string and do not reflect real data I would suggest you use some dummy text (like Lorem Ipsum) to test with as it has spacing more akin to regular text.