Here's the live site: http://chadfraser.com/
As you can see, if you look on mobile or scale your browser window, the words break in strange places. I could add hyphens, except my client is a professional writer and doesn't want them. We shouldn't need them though - I can't figure out why the words won't just wrap with the white space.
Any thoughts would be appreciated.
Its because your code is assigning word-wrap: break-word; It causes the word to break in half if necessary.
Most precisely, it is been set in styles.css on line 51:
body {
word-wrap: break-word;
...
So, your entire document will behave like this. Set the property to word-wrap: normal on the elements you don't want to break, or just remove this property from the body
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.
I have spent hours trying to prevent one of my child divs from breaking its parent's div.
Link: http://bowenhost.com/wordpress/
Screenshot:
It's the saddads widget / div that keeps breaking.
Feel free to inspect element / firebug on your web browsers to find a solution.
Thanks in advance guys. I really appreciate it!
the content is with out spaces. so it is treated as single word. give some sentence with space between the words and check
If you want to break the word which has no spaces you can use word wrap of css3
.textwidget {
word-wrap: break-word;
}
It will break to a new line if there is a space. But if there is no space you could look into using these CSS properties.
Word Wrap - word-wrap: break-word;, https://developer.mozilla.org/en-US/docs/Web/CSS/word-wrap
Word Break - word-break: break-all;, https://developer.mozilla.org/en-US/docs/Web/CSS/word-break
Make sure to check the compatability on those pages.
you just make some two new classes for your HTML than it will work perfectly see below how i achieved your desired result....and one thing more with this just add spaces between your content also... so you will have to give the space between the content....
make these two classes for your HTML
CSS
.widget-inner {
overflow: hidden;
}
.textwidget {
white-space: pre-wrap;
}
see the attached demo image you will get a basic idea how i did
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
I have a css class on a textarea like this..
.expanderHTMLText{
font: 12px Arial, Helvetica;
min-height: 50px;
white-space:nowrap;
}
I do not want words to break in between long words, but I do want the text to fill the box not be all on 1 line with a scroll bar. I want to get rid of the horizontal scroll but not have to break the words to do it. How do I accomplish this?
Remove white-space:nowrap; line and it will not be on one line.
Edit:
Who down-voted me? Please give me an explanation for that.
white-space: nowrap; explicitly defines, that wrapping will not occur. The only way how text can be wrapped is by removing or changing this property.
Default value for white-space property is normal, which acts almost identically to nowrap except it will wrap the text (collapse spaces).
If you do not want to words (even long ones) to be split on multiple lines, you will need to add word-wrap: normal; as JSW189 suggested.
But then you would still get a horizontal scrollbar if you would have a word which does not fit on one line - but thats obvious, you will either have word on multiple lines, either scrollbar.
Here is the link to the JS Fiddle http://jsfiddle.net/NnQLq/ Sorry for the awkwardness and half completed nature of the fiddle. My css has gotten so complicated, that I can't easily isolate the issue/part of the page. The boxes on the page each contain a tittle. Some of the tittles overflow past the edge of the box. What I want is for them to wrap around the box (like normal text) and then, if they go to many lines down for the box to contain them, a scroll to apear on the edge of the box. Like when overflow:scroll is set. I know the last part is somewhat awkward a solution, but the boxes must stay the same size.
For some information, the box_list_docs_blue tag is the one that contains the box. It is sometimes pared with the box_list_docs_gold tag in css. Use the search page function to find all things pertaining to this class.
You need to apply word-wrap: break-word; to #name_area.
#name_area {
word-wrap: break-word;
}
jsfiddle