I have a question!
My div can have a long text. This div doesn't have fixed height, and I have trouble on mobile phones.
For instance, my device has width 320px, but the inner div has width 454px.
It happens to long words.
You can see my issue on codepen.
Can I fix it only with CSS?
I would be grateful if you could help me to fix this!
use this css code:
p{width:100px;
height:auto;
border:2px solid #000;
overflow-wrap: break-word;}
<p> this is a biggggggggggggggggggg word</p>
I've fixed my issue with this css code:
.breaking {
-ms-word-break: break-all;
word-break: break-all;
word-break: break-word;
-webkit-hyphens: auto;
-moz-hyphens: auto;
hyphens: auto;
}
CBroe, thanks for your help.
Related
I have a situation where there can be long words like 'hellowordsometext' or integer like '1234567891122' without any space in between. check this js please. http://jsfiddle.net/rzq5e/6/
how is it possible to break it in to next line after it reach the div width. what happens now is, it spans out out along with th div
<div>Solutionforentprise</div>
What you need is word-wrap: break-word;, this property will force the non spaced string to break inside the div
Demo
div {
width: 20px;
word-wrap: break-word;
}
I have found this solution my self.
word-break: break-all;
but it doesn't work for Opera.
http://www.w3schools.com/cssref/tryit.asp?filename=trycss3_word-break
The other answers have some problems with old browsers, like before Chrome 32.
Its better to use this code:
/* These are technically the same, but use both */
overflow-wrap: break-word;
word-wrap: break-word;
-ms-word-break: break-word;
word-break: break-word;
You can also add a hyphen where the word breaks (if supported):
-ms-hyphens: auto;
-moz-hyphens: auto;
-webkit-hyphens: auto;
hyphens: auto;
Source
.c1 {
width: 200px;
border: 1px solid;
/* These are technically the same, but use both */
overflow-wrap: break-word;
word-wrap: break-word;
-ms-word-break: break-word;
word-break: break-word;
/* Adds a hyphen where the word breaks, if supported (No Blink) */
-ms-hyphens: auto;
-moz-hyphens: auto;
-webkit-hyphens: auto;
hyphens: auto;
}
<div class="c1">
For more information, please visit: http://csstricks.com/thisisanonexistentandreallylongurltoaddtoanytextinfactwhyareyoustillreadingit.
</div>
give an id or class to your div
then
#divid
{
width: 30px;
word-wrap: break-word;
}
Word-wrap is supported in IE 5.5+, Firefox 3.5+, and WebKit browsers such as Chrome and Safari, Opera 10.5+.
Like this
DEMO
CSS
div {
width: 20px;
word-wrap:break-word;
}
Fix the size of the DIV and apply 'overflow: hidden'
so it will not effect the grid size an all na.
div{width: 40px;
overflow: hidden;}
do you need to view entire text?
I have a situation where there can be long words like 'hellowordsometext' or integer like '1234567891122' without any space in between. check this js please. http://jsfiddle.net/rzq5e/6/
how is it possible to break it in to next line after it reach the div width. what happens now is, it spans out out along with th div
<div>Solutionforentprise</div>
What you need is word-wrap: break-word;, this property will force the non spaced string to break inside the div
Demo
div {
width: 20px;
word-wrap: break-word;
}
I have found this solution my self.
word-break: break-all;
but it doesn't work for Opera.
http://www.w3schools.com/cssref/tryit.asp?filename=trycss3_word-break
The other answers have some problems with old browsers, like before Chrome 32.
Its better to use this code:
/* These are technically the same, but use both */
overflow-wrap: break-word;
word-wrap: break-word;
-ms-word-break: break-word;
word-break: break-word;
You can also add a hyphen where the word breaks (if supported):
-ms-hyphens: auto;
-moz-hyphens: auto;
-webkit-hyphens: auto;
hyphens: auto;
Source
.c1 {
width: 200px;
border: 1px solid;
/* These are technically the same, but use both */
overflow-wrap: break-word;
word-wrap: break-word;
-ms-word-break: break-word;
word-break: break-word;
/* Adds a hyphen where the word breaks, if supported (No Blink) */
-ms-hyphens: auto;
-moz-hyphens: auto;
-webkit-hyphens: auto;
hyphens: auto;
}
<div class="c1">
For more information, please visit: http://csstricks.com/thisisanonexistentandreallylongurltoaddtoanytextinfactwhyareyoustillreadingit.
</div>
give an id or class to your div
then
#divid
{
width: 30px;
word-wrap: break-word;
}
Word-wrap is supported in IE 5.5+, Firefox 3.5+, and WebKit browsers such as Chrome and Safari, Opera 10.5+.
Like this
DEMO
CSS
div {
width: 20px;
word-wrap:break-word;
}
Fix the size of the DIV and apply 'overflow: hidden'
so it will not effect the grid size an all na.
div{width: 40px;
overflow: hidden;}
do you need to view entire text?
I have a situation where there can be long words like 'hellowordsometext' or integer like '1234567891122' without any space in between. check this js please. http://jsfiddle.net/rzq5e/6/
how is it possible to break it in to next line after it reach the div width. what happens now is, it spans out out along with th div
<div>Solutionforentprise</div>
What you need is word-wrap: break-word;, this property will force the non spaced string to break inside the div
Demo
div {
width: 20px;
word-wrap: break-word;
}
I have found this solution my self.
word-break: break-all;
but it doesn't work for Opera.
http://www.w3schools.com/cssref/tryit.asp?filename=trycss3_word-break
The other answers have some problems with old browsers, like before Chrome 32.
Its better to use this code:
/* These are technically the same, but use both */
overflow-wrap: break-word;
word-wrap: break-word;
-ms-word-break: break-word;
word-break: break-word;
You can also add a hyphen where the word breaks (if supported):
-ms-hyphens: auto;
-moz-hyphens: auto;
-webkit-hyphens: auto;
hyphens: auto;
Source
.c1 {
width: 200px;
border: 1px solid;
/* These are technically the same, but use both */
overflow-wrap: break-word;
word-wrap: break-word;
-ms-word-break: break-word;
word-break: break-word;
/* Adds a hyphen where the word breaks, if supported (No Blink) */
-ms-hyphens: auto;
-moz-hyphens: auto;
-webkit-hyphens: auto;
hyphens: auto;
}
<div class="c1">
For more information, please visit: http://csstricks.com/thisisanonexistentandreallylongurltoaddtoanytextinfactwhyareyoustillreadingit.
</div>
give an id or class to your div
then
#divid
{
width: 30px;
word-wrap: break-word;
}
Word-wrap is supported in IE 5.5+, Firefox 3.5+, and WebKit browsers such as Chrome and Safari, Opera 10.5+.
Like this
DEMO
CSS
div {
width: 20px;
word-wrap:break-word;
}
Fix the size of the DIV and apply 'overflow: hidden'
so it will not effect the grid size an all na.
div{width: 40px;
overflow: hidden;}
do you need to view entire text?
why does CSS rule
a {
word-wrap: break-word;
}
with
<div>
verylongurlherewithnospaces
</div>
not wrapping and causing window to show scrollbar, whereas
div {
word-wrap: break-word;
}
will do the wrapping at its anchor child's text fine?
UPDATE:
just noticed (see L3ST-instance URL field at this form when you resize the window) that I needed word-break:break-all instead of word-wrap:break-word, apart from the suggested display:inline-block, so now using:
a
{
word-break: break-all !important; /* make sure containers don't override */
display: inline-block !important;
}
which works fine
The CSS word-wrap: break-word; works only in display:block; or display:inline-block; elements so you can just use:
a {
display:inline-block;
word-wrap: break-word;
}
a {
width:100px;
word-wrap: break-word;
display:inline-block;
}
<div>
verylongurlherewithnospaces
</div>
P.S. div are display:block; as default by user-agent.
I have to display really long sentences in a paragraph in a div. Couple of things I have to take care for this situation. 1. The lines should not go out of bound 2. The wrapping/breaking of the sentence should happen at the appropriate places, such as spaces between words. The following CSS works really well in Chrome. The code is from https://css-tricks.com/snippets/css/prevent-long-urls-from-breaking-out-of-container/ with a minor modification.
.handle-long-sentence{
white-space: normal;
overflow-wrap: break-word;
word-wrap: break-word;
-ms-word-break: break-all;
word-break: break-all;
word-break: break-word;
-ms-hyphens: auto;
-moz-hyphens: auto;
-webkit-hyphens: auto;
hyphens: auto;
}
In IE11, the paragraph is displayed as flush with the word breaking randomly at various places.
Thanks
Finally I have found the CSS which worked in all three major browsers
.handle-long-sentence{
white-space:normal;
white-space: -moz-pre-wrap; /* Mozilla */
-ms-hyphens: auto;
-moz-hyphens: auto;
-webkit-hyphens: auto;
-o-hyphens: auto;
hyphens: auto;
}
This puts an hyphen in IE whenever a word is broken. In Chrome and Firefox, no word is broken and the space between words is used for word wrapping.