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?
Related
I have a tr with td's containing inputs. I'm not applying any size attribute or style with regard to width.
Some inputs contain just single digits and some contain words. The ones containing single digits have much extra white space and the ones containing words contain far less.
When I resize the page containing the table, the table shrinks to keep fitting 100% of the page. But, all the inputs seem to basically resize at about the same rate with no regard for which input has the most space to give up. By space, I mean the empty area in the input that does not show any data; the extra space to the right (as my inputs are left aligned).
Is there a css property that would apply to this situation to help accomplish reducing the size of the inputs which have the most white space to give up first and putting off truncating visible text as long as possible?
You could try auto sizing the inputs using a script like this:
https://stackoverflow.com/a/931695/288568
Anyways, the script is not for drop downs so far, but could be adapted.
But: If in the first line there is a 1 and in the second a 11 then the inputs would have different sizes.
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.
In the following example (from Mozilla's site):
<div style="color:darkred"> The color of this text is the same as the one of the line: <div style="background:currentcolor; height:1px"></div> Some more text. </div>
Please take a look at this corresponding jsfiddle link.
If I remove "background:currentColor" from the style, the line it draws disappears. How does a style like this result in the addition of a line?
Thanks.
Because the div has a height of one pixel (1px), which means it is presented as a line - namely because there is no content of x-pixels height within it, it sizes itself appropriately (if no height was specified then it would collapse to 0). Therefore, because the div has a background colour (which doesn't match the colour on which it is rendered (which, if the colours did match, would give the illusion of invisibility)) you see one pixel height line of that colour.
Think of crushing a box down, or folding paper: you couldn't make it entirely disappear (out of existence, or current form, at least not easily) and, upon bringing yourself horizontal to the plane on which it sat, would still see it (or its colour/shade of, etc.)
Of course, concentrating on only that one not a solution wouldn't be too helpful, although others have come to your aid: use a span element to 'group' text within text, these are inline by default and by rights should only be output if there is text to go in one - this forgets for a moment that you explicitly specify a height value at all, which is what makes me wonder about the whole scenario.
because Div is a block element.
<div style="color:darkred"> The color of this text is the same as the one of the line: <span style="background:currentcolor; height:1px"></span> Some more text. </div>
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.