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.
Related
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.
With CSS can I make a browser ignore the character but respect normal white space?
So this:
Some text More text
Is displayed like this:
Some text More text
Not:
Some text More text
UPDATE There is actually more white space in my code. I need the default behavior where extra white space doesn't get rendered on the page so I dont think I can use white-space: pre or pre-wrap
So this shouldn't be excessively indent before the initial word.
Some text More text
I don't think there's a pure CSS way of doing that, since is an actual character that is different from the whitespace created by the spacebar in a text editor (what gets ignored by HTML renderers). However, depending on how those are appearing, you may be able to use a script that searches for and removes that character wherever it sees it.
I have a table in a fieldset that is not displayed properly (overflow) because of a long file name that I cannot wrap. Is there a way to wrap the file name that is in the table?
<table>
<tr><td>stackoverflow.com/questions/4584756/how-can-i-make-the-datagridviewtextboxcolumn-wrap-to-a-new-line-if-its-text-is-t</td></tr>
</table>
I set the width and overflow style on the td element and still no help. Any other ideas?
you can try this in css word-wrap:break-word (set a width too. This is CSS3 so might not work in older browsers)
check word wrap in css / js
This is what worked for me :
<td style='word-break:break-all'>
T1_C50621021900010788086700100001010000000072101000072_E107880867_R115710745_F20190221.pdf
</td>
The word-break:break-all literally breaks the long filename into pieces, each piece with same width except the last one, with an automatic width chosen by the browser (I guess you can experiment with a custom width).
In general, a browser will only wrap a text string at a space. So to get it to wrap, you'd have to insert spaces. In principle, you could check if the length is over some value and if so insert a space at a specified point, or add a space after every slash, or something like that. But if the field is updatable, you'd have to be sure to remove these spaces on input. And if the user is going to cut and paste this field, he'd get mysterious extra spaces.
Have you tried this selector property and value?
element
{
white-space: inherit;
}
<table><tr><td style="overflow-x: auto">your file name</td></tr></table>
This will wrap it in next line automatically
In a case like this, some browsers will not break the string at all by default, some will break after a hyphen “-”, some may also break after a slash “/”. If you really need to have a long filename in a table cell, you need to decide what you want—what would be the least of evils.
After the decision, use nobr markup to prevent line breaks and wbr markup to allow them, or their character-level or CSS counterparts (which work less widely). There are many nasty details involved; see my page on preventing and allowing line breaks.
Breaking after “-” is problematic because the reader won’t know whether the hyphen has been introduced in word hyphenation or is part of the filename itself. Then again, does this matter? What is the reader supposed to do with the long filename? In this case, the “filename” looks really like a URL without the “http://” part, and in such cases, it is better to use a descriptive link text (which may wrap freely) and put the URL where it belongs, an href attribute.
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.