I am trying to break a text by word if possible, and if not - break anyways so the layout isn't dying. This works by default in google chrome and wraps properly, but it doesn't work in firefox.
.a {
width: 200px;
word-wrap: break-word;
display: inline-block;
white-space: normal;
word-break: break-word;
}
.a>div {
text-align: left;
display: inline-block;
}
<div class="a">
<div>
achrichteinenachrichteinenachrichtchrichteinenachrichteinenachrichteinenachrichteinenachrichteinenachrichteinenachrichteinenachriachrichteinenachrichteinenachrichtchrichteinenachrichteinenachrichteinenachrichteinenachrichteinenachrichteinenachrichteinenachriachrichteinenachrichteinenachrichtchrichteinenachrichteinenachrichteinenachrichteinenachrichteinenachrichteinenachrichteinenachriachrichteinenachrichteinenachrichtchrichteinenachrichteinenachrichteinenachrichteinenachrichteinenachrichteinenachrichteinenachriachrichteinenachrichteinenachrichtchrichteinenachrichteinenachrichteinenachrichteinenachrichteinenachrichteinenachrichteinenachriachrichteinenachrichteinenachrichtchrichteinenachrichteinenachrichteinenachrichteinenachrichteinenachrichteinenachrichteinenachri
</div>
</div>
http://jsfiddle.net/prswjktc/12/
The problem can be solved by adding max-width: 100%; in the case in the fiddle but I am looking for alternative solutions. (I can't remove the inner div either).
Here we go :-)
Put your words (or terms) into <span>s.
set to
display: inline-block (so they get all the width they need)
max-width: 100%; overflow: hidden (so, yes, there's a chop-off, if column exceed)
overflow-wrap: break-word (so he breaks if there's a chop-off
legacy backup (think -moz-whatever): word-wrap: break-word
code:
span
display: inline-block
max-width: 100%
overflow-wrap: break-word
word-wrap: break-word
full Codepen
You can use the CSS3 property overflow-wrap, which may be what you're looking for. Read more at MDN, including about browser support, but the gist is that "In contrast to word-break, overflow-wrap will only create a break if an entire word cannot be placed on its own line without overflowing."
Note also that the width of 200px you have is not on the div that contains the long text but on the .a parent div, and that the div with the long text has display: inline-block, so currently its width will be determined by its content and it will spill out of the fixed-width .a parent div. To fix this, either give the inner div (.a > div) an explicit width (could be 200px, or 100%, or whatever your layout actually requires), or make the inner div display as a block by removing display: inline-block and/or setting display: block explicitly.
Here's a working snippet, in which I've left .a > div as an inline-block, and created another div .b where .b > div is a block:
.a {
width: 200px;
word-wrap: break-word;
display: inline-block;
white-space: normal;
word-break: break-word;
}
.a>div {
text-align: left;
width: 100%;
display: inline-block;
overflow-wrap: break-word;
}
.b {
width: 200px;
display: inline-block;
white-space: normal;
}
.b>div {
text-align: left;
display: block;
overflow-wrap: break-word;
}
<div class="a">
<div>
achrichteinenachrichteinenachrichtchrichteinenachrichteinenachrichteinenachrichteinenachrichteinenachrichteinenachrichteinenachriachrichteinenachrichteinenachrichtchrichteinenachrichteinenachrichteinenachrichteinenachrichteinenachrichteinenachrichteinenachriachrichteinenachrichteinenachrichtchrichteinenachrichteinenachrichteinenachrichteinenachrichteinenachrichteinenachrichteinenachriachrichteinenachrichteinenachrichtchrichteinenachrichteinenachrichteinenachrichteinenachrichteinenachrichteinenachrichteinenachriachrichteinenachrichteinenachrichtchrichteinenachrichteinenachrichteinenachrichteinenachrichteinenachrichteinenachrichteinenachriachrichteinenachrichteinenachrichtchrichteinenachrichteinenachrichteinenachrichteinenachrichteinenachrichteinenachrichteinenachri
</div>
</div>
<div class="b">
<div>
achrichteinenachrichteinenachrichtchrichteinenachrichteinenachrichteinenachrichteinenachrichteinenachrichteinenachrichteinenachriachrichteinenachrichteinenachrichtchrichteinenachrichteinenachrichteinenachrichteinenachrichteinenachrichteinenachrichteinenachriachrichteinenachrichteinenachrichtchrichteinenachrichteinenachrichteinenachrichteinenachrichteinenachrichteinenachrichteinenachriachrichteinenachrichteinenachrichtchrichteinenachrichteinenachrichteinenachrichteinenachrichteinenachrichteinenachrichteinenachriachrichteinenachrichteinenachrichtchrichteinenachrichteinenachrichteinenachrichteinenachrichteinenachrichteinenachrichteinenachriachrichteinenachrichteinenachrichtchrichteinenachrichteinenachrichteinenachrichteinenachrichteinenachrichteinenachrichteinenachri
</div>
</div>
Add word-break:break-all; to the child selector (.a > div)
https://jsfiddle.net/f4bdx7z9/1/
.a {
width: 200px;
word-wrap: break-word;
display:inline-block;
white-space:normal;
word-break:break-word;
}
.a > div {
text-align:left;
display:inline-block;
word-break:break-all;
}
<div class="a">
<div>
achrichteinenachrichteinenachrichtchrichteinenachrichteinenachrichteinenachrichteinenachrichteinenachrichteinenachrichteinenachriachrichteinenachrichteinenachrichtchrichteinenachrichteinenachrichteinenachrichteinenachrichteinenachrichteinenachrichteinenachriachrichteinenachrichteinenachrichtchrichteinenachrichteinenachrichteinenachrichteinenachrichteinenachrichteinenachrichteinenachriachrichteinenachrichteinenachrichtchrichteinenachrichteinenachrichteinenachrichteinenachrichteinenachrichteinenachrichteinenachriachrichteinenachrichteinenachrichtchrichteinenachrichteinenachrichteinenachrichteinenachrichteinenachrichteinenachrichteinenachriachrichteinenachrichteinenachrichtchrichteinenachrichteinenachrichteinenachrichteinenachrichteinenachrichteinenachrichteinenachri
</div>
</div>
Related
When I have inline-block parent and child elements IE shows ghost space between them:
I can fix this by removing the whitespace in the html but I want to know if there is a css cross-browser solution for this.
.bar {
height: 30px;
}
.section {
display: inline-block;
height: 100%;
background: red;
}
.section::before {
content: "";
display: inline-block;
height: 100%;
vertical-align: middle;
margin-left: -.25rem;
}
span {
background: green;
display: inline-block;
vertical-align: middle;
}
<div class="bar">
<div class="section">
<span>
IE ghost
</span>
</div>
<div class="section">
<span>
No ghost
</span><!--
--></div>
</div>
This occurs because of the inline behaviour of the inline-block. They are treated like other inline elements where surrounding sibling elements (including spaces, text, etc.) Will be parsed as opposed to ignored.
As you stated, one solution is to remove the white-space between the affected divs which can mess with your html formatting (if you care about that).
Solution using CSS.white-space:
If you are sure that you will not require the contents of the containing div.bar to wrap then you can set the CSS property of
.white-space to nowrap:
.bar {
height: 30px;
white-space: nowrap;
}
I want to have an icon (checkmark) behind a line with variable width.
if the line becomes too long, i want it to be truncated with ellipsis.
But the checkmark is supposed to stay AFTER the ellipsis
https://jsfiddle.net/Lkvt39re/
.inner {
width: 80%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
i've set the width to 80%, and want to have the :afterinserted ..well, after the ellipsis.
how can i do that?
Thanks
Try adding a ::before pseudo element instead, then style it to float right. This way, your pseudo content won't become trimmed out by the restrictions set to the element width.
CSS
.inner::before {
content: 'X';
float: right;
}
Alternatively
You can set the ::after pseudo element to the parent element .outer, then set the nested .inner element to display inline-block (allowing the pseudo element of .outer to fall after initial width of .inner) with a max-width declared; once this max-width is exceeded your overflow rule will apply, giving you the ellipsis but still keeping the pseudo element of .outer visible after the text-overflow.
The problem is trying to declare this pseudo element to an element that you've also declared width restrictions and overflow rules to. You'll need to declare the pseudo element outside of the element that will, at some point, begin trimming out content.
.inner {
width: 80%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.inner::before {
content: 'X';
float: right;
}
.outer {
width: 200px;
}
/* Alternative */
.alternative .inner {
max-width: 80%;
width: auto;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
display: inline-block;
}
.alternative .inner.no-max-width {
max-width: none;
}
.alternative .inner::before {
display: none;
}
.alternative.outer::after {
content: 'X';
display: inline-block;
}
<div class="outer">
<div class="inner">
this is pretty longggggg
</div>
</div>
<br>
<p><strong>Alternative</strong></p>
<div class="alternative outer">
<div class="inner">
this is pretty longgggggggggggg
</div>
</div>
<div class="alternative outer">
<div class="inner no-max-width">
this is pretty long
</div>
</div>
Devman,
You need to give the pseudo element some shape and define it as either an inline-block or a block element to do so. You can then set the dimensions appropriate to your styling.
Check out this edit:
.inner {
width: 80%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
position:relative;
/** give your container some extra space for the pseudo **/
padding-right: 25px;
}
.inner::after {
content: 'X';
color:red;
/** define it as a "block" element and add dimension **/
display: inline-block;
height: 1.0rem;
width: 1.0rem;
}
.outer {
width: 180px;
}
http://codepen.io/jonrandahl/pen/rLMKwR
http://codepen.io/rick-li/pen/oshCb
<div class="wrapper">
<div class="left"></div>
<span>lfjaslkjasldjfaljdfaldflasjflasjdfldasfsdafafasdfsdafadsfazxcvzvzxv</span>
</div>
.wrapper{
width: 400px;
height: 300px;
border: solid 1px;
}
.wrapper .left{
float: left;
width: 200px;
height: 200px;
border: solid 1px;
background-color: #111111
}
.wrapper span{
word-wrap: break-word;
}
you will notice the text dropped to the bottom,
if there're spaces exist in the text, it will wrap correct and lies on the wright, so I wonder why the word-wrap: break-word or word-wrap: break-all doesn't work?
You could also use, word-wrap: break-word;
.wrapper .right{
display: block;
width:200px;
}
.wrapper .right{
word-wrap:break-word;
}
.right should not be inline. Also, assign some width to it.
.wrapper .right{
display: block;
width: 200px;
}
.wrapper .right{
word-break: break-all;
}
DEMO here.
NoobEditor in reference to your answer did you mean to say "word-wrap only works when there are no spaces rather than when there are spaces in the word? The reason why word-wrap is not working in the code above is due to wrong placement of closing div.
<div class="wrapper">
<div class="left"></div> <!-- here is your problem -->
<span>lfjaslkjasldjfaljdfaldflasjflasjdfldasfsdafafasdfsdafadsfazxcvzvzxv</span>
</div>
If you close div tag in the right place, word-wrap will work:
<div class="wrapper">
<div class="left">
<span>lfjaslkjasldjfaljdfaldflasjflasjdfldasfsdafafasdfsdafadsfazxcvzvzxv</span>
</div> <!-- close statement here -->
</div> <!-- close statement here -->
See it here
You can do this a couple of ways, you can change the display from inline so that you can set a max-width, allowing it to know when it should break the word:
http://codepen.io/anon/pen/ibvKq
.wrapper .right{
display: inline-block;
max-width: 290px;
word-wrap: break-word;
}
Alternatively, if you want to keep the inline, you need to couple the word-wrap: break-word; with white-space: pre; but this does mean it will preserve line-breaks and spaces. Personally, I'd use the first one over this one.
http://codepen.io/anon/pen/cfhwI
.wrapper .right{
display: inline;
white-space: pre;
word-wrap: break-word;
}
How to create set of float:right divs one next to another and make them not wrap, no matter how much of them exists or how wide is any of them. If they together are wider than viewport, then x-scroll should appear.
Content inside those divs should wrap normally.
CSS only would be good.
Style the parent element with white-space: nowrap;, though this only works with display: inline (or display: inline-block;) elements. Given the following HTML:
<div id="parent">
<div class="child"></div>
<!-- there's quite a lot of these... -->
<div class="child"></div>
</div>
And the CSS:
#parent {
white-space: nowrap;
}
#parent .child {
display: inline-block;
/* there's some other CSS for aesthetics */
}
JS Fiddle demo.
Unfortunately I don't think there is a way of forcing float-ed elements to not wrap to a new line.
To preserve or, rather, force normal line-wrapping for descendant elements you'll have to explicitly over-ride the inheritance and set white-space: normal (as well as, possibly, define a width or max-width)
/* other CSS remains intact */
#parent .child {
display: inline-block;
/* irrelevant/aesthetic CSS */
white-space: normal;
max-width: 8em;
}
JS Fiddle demo.
Few elements: http://jsfiddle.net/thirtydot/A8duy/
Many elements: http://jsfiddle.net/thirtydot/A8duy/1/
HTML:
<div class="block-container">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</div>
CSS:
.block-container {
text-align: right;
white-space: nowrap;
float: left;
width: 100%;
margin-bottom: 1em;
border: 1px solid red;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.block-container > div {
width: 50px;
height: 50px;
vertical-align: top;
display: inline-block;
*display: inline;
zoom: 1;
text-align: left;
white-space: normal;
border: 1px solid blue;
}
This may sound weird but i have some css which aligns mys divs. In one place i also use http://www.brunildo.org/test/img_center.html which centers images.
Now i want my divs inside a larger div to go to another line if this one gets full. float: left seems to be the answer. The problem is it ruins my formatting. Including solution in the above link. I have this test code. If i remove the width and float it looks fine except it may take up too much space and not go to another line.
I was thinking i could use float on an outerdiv and center the image within. However float: left is still breaking it. I am hoping there is a way to remove the float so each div does go left but the div inside centers correctly not breaking my formatting.
<style type="text/css">
.wraptocenter {
display: table-cell;
text-align: center;
vertical-align: middle;
width: 200px;
height: 200px;
background: blue;
}
.wraptocenter * {
vertical-align: middle;
}
/*\*//*/
.wraptocenter {
display: block;
}
.wraptocenter span {
display: inline-block;
height: 100%;
width: 1px;
}
/**/
div.c
{
background: red;
overflow: hidden;
min-width: 400px;
max-width: 400px;
}
div.c div
{
float: left;
}
</style>
<!--[if lt IE 8]><style>
.wraptocenter span {
display: inline-block;
height: 100%;
}
</style><![endif]-->
<div class="c">
<div>
<div>
<div class="wraptocenter"><span></span><img src="a.jpg" alt="/a.jpg"></div>
<div class="wraptocenter"><span></span><img src="a.jpg" alt="/a.jpg"></div>
<div class="wraptocenter"><span></span><img src="a.jpg" alt="/a.jpg"></div>
</div></div></div>
regular old display:inline can be used on the images themselves (or a container div). this will let the items flow onto multiple lines depending on the width of the enclosing div.
to center the top-level div, something like margin: 0 auto should do it (if the parent has a width) or the good old <center> tag if not.