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 =)
Related
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.
I've following html:
<div class="container">
<div class="header">
<h1>
a very long long long, really very very long headline ...
</h1>
</div>
</div>
and following css:
.container{
width:200px;
}
.header h1{
background-color: #e0e0e0;
display: inline;
padding: 2px 8px;
color: black;
font-size: 16px;
font-weight: normal;
line-height: 30px;
}
The problem is, that the browser adds a linebreak because of the long header and small width of the wrapping container. Thats fine. But the padding-left will not be added to the broken second and further lines. I can do this with an negative text-indent and positive padding-left to .header. but the background-color will not be moved to left so it seems as would be there still a zero padding.
How can I change this? Any trick available?
Great greetings, Falk
Try changing display: inline; to display: inline-block;.
As I understand it, left and right padding on inline elements will be applied to the beginning and end of the element, regardless of whether there's any line break in between. On a block (or inline-block) element, the padding is applied to the left and right of the entire element.
See https://developer.mozilla.org/en-US/docs/Web/CSS/display for a lot more information!
Along with your existing display-inline:
-webkit-box-decoration-break: clone;
box-decoration-break: clone;
Note that it is currently not supported by IE/Edge and considered experimental - but it works on other browsers. Might be an option!
This is a fairly new CSS3 tag that might not have been available at the time of the other answers.
I am trying to use text-overflow: ellipsis for my inputs but only chrome and Firefox shows it fines. On IE and opera it does not make any effect. Is there any hack..
Fiddle: http://jsfiddle.net/SZYFw/
input {
text-overflow: ellipsis
}
<pre>
<input type="text" value="Lorem ipsum dolor sit amet, consectetuer adipiscing elit.">
</pre>
opera version: 12.11 Build 1661
ie version: 10
I could make it work with a DIV here with all compatibilities, but, unfortunately, see what it says for input elements here...
Compatibility for Opera:
-o-text-overflow: ellipsis;
Also see this link. I think it's not supported for Opera and IE... But as you can see, the rest works perfect!
By the CSS Basic UI draft, text-overflow “specifies rendering when inline content overflows its block container”. But an input element has no content; it has a value, which is displayed, but the value is not element content.
For considering a workaround, please specify the context and purpose of using ellipsis for input text. Normal implementations of input type=text automatically scroll the value horizontally if needed, and a user can be expected to see that he reaches the end of the input box.
Assuming you have no code, ellipsis doesn't work.
See if your code matches to this:
display: inline-block;
*display: inline;
*zoom: 1;
text-overflow: ellipsis;
-ms-text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
word-wrap: normal;
max-width: 130px;
vertical-align: bottom;
Fiddle: http://jsfiddle.net/4mmQm/
This works in IE 7, IE 8, IE 9, IE 10, Firefox, Chrome
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>
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>