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.
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.
lets say I got 20 same divs with float:left property and some width. I want them to be in one line and if they dont fit in screen just to make page scroll horizontally.
fiddle
That's basically how floats work. If you want the described behaviour you can do something else instead, for instance white-space: nowrap; on the container and display: inline-block; instead of float.
http://jsfiddle.net/NPzsV/3/
.container {
white-space: nowrap;
}
.line {
display: inline-block;
width: 200px;
vertical-align: top;
white-space: normal;
}
One thing to note though: with this approach, newlines/spaces/tabs between the divs will cause a space between them in the rendering.
Use display: inline-block instead of float: left on the divs, and add the property white-space: nowrap to their parent container.
Demo: http://jsbin.com/akiniv/1/edit
Demo with your fiddle ;) http://jsfiddle.net/NPzsV/4/
set the height to the parent div, and add the property overflow:scroll
<div class="parentDiv">
<div class="line">ddd</div>
<div class="line">ddd</div>
<div class="line">ddd</div>
...
</div>
and css:
.parentDiv{height:50px; overflow: scroll;}
Set a hard width on the parent element:
body{ width:8000px; }
Demo
Link to jsfiddle: http://jsfiddle.net/WBZng/1/
I have a HTML structure that looks like this:
<div>
<input/>
<span>Label comes here...</span>
</div>
Both input and span should have display:inline. Also, span has word-wrap:break-word so that a long text without space still becomes wrapped. However, if the text is long, then the <span> is displayed in a new line instead of preserving display:inline-block. This is not an issue if there is a space in <span>.
You can consider giving ellipsis to the span element:
.panel span {
width: 20px;
display: inline-block;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
Fiddle: http://jsfiddle.net/WBZng/3/
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>