I am building in jQuery mobile framework.
I have the following structure that I want to display in a kind of table layout:
<div style="word-wrap:break-word" class="ui-block-n" ><li>verylongword.........</li></div>
My problem is that when I have long words, the words go outside of the div (i.e. overflow). I would like the words to be wrapped.
I used word-wrap:break-word, but this doesn't seem to work. I also tried all of these options, with no success:
white-space: pre-wrap;
white-space: -moz-pre-wrap;
white-space: -pre-wrap;
white-space: -o-pre-wrap;
word-wrap: break-word;
How can I get my words to wrap?
You need the whole word-wrap thing on your li's:
<style>
li {
word-wrap:break-word;
}
</style>
Related
When using word-wrap: break-word on a div with two consecutive long words, the second word that is broken off starts on a new line, as such:
IAmALongW
ord
IAmAlsoAL
longword
Is there any way to prevent this in css, to get the following?
IAmALongW
ord IAmAl
soALongwo
rd
Without reverting to word-break: break-all, of course.
.container{
width: 100px;
display: inline-block;
border: 1px solid black;
word-wrap: break-word;
white-space: pre;
}
<div class="container">
<p>thisisaverylongword anotherverylongword</p>
</div>
Using white-space: pre; should do it, I believe.
Using
in between words rather than just a space can help prevent the element forcing a break where you don't want one also. This helps when you do not want to leave one small word on a line on its own for instance.
I have a div with mixed display: inline and display: inline-block elements, and I'm trying to get it long lines to wrap properly when the parent has a word-wrap: break-word applied.
So for example if I have
<div><span>hihihi</span><span style='display: inline-block'>hello</span>moremoremore</div>
I would like the text wrapping to behave as word-wrap: break-word normally does, and break where needed. What I am getting instead is a break right after the inline-block element. Is there any way to change this behavior?
I set up a minimal example in a codepen: http://codepen.io/anon/pen/vEXdMR
To see what I want, just comment out display: inline-block in the styling for the <b>.
Try setting white-space: pre in your parent div
div
{
margin: 20px;
width: 60px;
word-wrap: break-word;
white-space: pre;
}
Here's an updated codepen: http://codepen.io/anon/pen/ByLYgv
As per documentation, taken from https://developer.mozilla.org/en-US/docs/Web/CSS/white-space
pre
Sequences of whitespace are preserved, lines are only broken at newline characters in the source and at <br> elements.
By adding property display: contents; to span. It works for me.
So I had a P tag grouping some text together so it would not leave the box and so it would look nice but when I added white-space: nowrap; (To make a horizontal overflow) it broke all that and now it is just going out of it's box and cant find a way to fix this.
Update Code Added
#content {
width:90%;
height:450px;
overflow-x:scroll;
overflow-y:hidden;
margin:auto;
white-space: nowrap;
}
#picturePost {
background:url(images/picture_post.png) no-repeat;
width:252px;
height:430px;
padding-top:25px;
padding-left:20px;
padding-right:20px;
padding-bottom:25px;
display:inline-block;
}
Then I am just putting the picturePost div inside the content div a couple of times.
The white-space no wrap property means exactly that, that the text will not wrap. Therefore, if your string is longer than the container p tag, it will extend outside of it. This is the appropriate behavior unless I am understanding your question wrong. Perhaps we code look at some code?
EDIT AFTER ADDING CODE
Is this what you are looking for then? http://jsfiddle.net/NUZyp/2/
I have <span class="text">11-12.SL.1 Some long text</span> where text has the following styles applied:
clear: left;
display: inline;
white-space: nowrap;
word-wrap: normal;
IE however, doesn't respect the white-space parameter.
vs Firefox, which respects it properly.
How can I get IE to respect it?
Turns out I needed to propagate the white-space up to the parents =)
I have a page which has a content like this...
<div id="content">
testingtestingtestingtestingtestingtestingtestingtestingtesting
testingtestingtestingtestingtestingtestingtestingtesting
testingtestingtestingtestingtesting
</div>
How do i apply a max-width on it . I m using this code in the css
#content {
max-width:50px; /* for standards-compliant browsers */
/*width:expression(document.body.clientwidth > 650? "650px": "auto" );*/
/* max-width expression for IE only */
}
but i m not getting the results in firefox...
http://pradyut.dyndns.org/WebApplicationSecurity/width.jsp
Are there any JavaScript solutions?
Any help
thanks
Pradyut
Well the reason why you not getting the expected result on the page you provided by the link is that you are using a span instead of a div.
Add
display: block;
to you style.
So, in your CSS, you can set the word-wrap property to break-word so that your string of text (w/ no whitespace) will be made to fit into the max-width:
E.g.
<style type="text/css">
#content {
max-width: 50px;
word-wrap: break-word;
}
</style>
#content {
max-width: 50px;
display: inline-block;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
You may like to remove display: inline-block; depending on the context of your element.
If you used your own example you would find that it works just fine. The page you linked to uses a span element, which is an inline element by default. Inline elements cannot have width or height. If you want to set max width on a span element, set it's display to block or inline-block:
<span id="content" style="max-width:50px; display:block;" >
testingtestingtestingtestingtestingtestingtestingtestingtesting
testingtestingtestingtestingtestingtestingtestingtesting
testingtestingtestingtestingtesting
</span>
Add spaces in between. I believe this occurs because css/html reads it as one word. eg..
<span id="content" style="max-width:50px; display:block;" >
testing testing testing testing testing testing testing testing testing
testing testing testing testing testing testing testing testing
testing testing testing testing testing
</span>