On css: if text line is break show dots
CssCss Problem Overview
I seen before this solution but i not remember where exactly... without JS
maybe it's work when line is break. But what a css property is?
Question is: how to show for user: dots, if text longer than 150px
div {
font-family: Arial;
background: #99DA5E;
margin: 5px 0;
padding: 1%;
width: 150px;
overflow: hidden;
height: 17px;
color: #252525;
}
<div>apple</div>
<div>jack fruit</div>
<div>super puper long title for fruit</div>
<div>watermelon</div>
Css Solutions
Solution 1 - Css
Are you talking about an ellipsis? Add this to your CSS
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
Fiddle: http://jsfiddle.net/5UPRU/7/
Solution 2 - Css
In order for text-overflow: ellipsis to work you must also specify a width (or a max-width), white-space: nowrap and overflow: hidden
The element must be a block so make sure to use display: block or display: inline-block on inline elements.
div {
width: 100px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
Solution 3 - Css
You're looking for text-overflow: ellipsis; - you need to specify it on the <div> in addition to white-space: nowrap; and overflow: hidden;
div {
font-family: Arial;
background: #99DA5E;
margin: 5px 0;
padding: 1%;
width: 150px;
overflow: hidden;
height: 17px;
color: #252525;
text-overflow: ellipsis;
white-space: nowrap;
}
Solution 4 - Css
You can use text-overflow: ellipsis; in css file. for example:
div {
font-family: Arial;
background: #99DA5E;
margin: 5px 0;
padding: 1%;
width: 150px;
overflow: hidden;
height: 17px;
color: #252525;
}
span {
float: left;
font-family: Arial;
background: #FAFA41;
margin: 5px 0;
padding: 1%;
width: 150px;
overflow: hidden;
height: 17px;
color: #505050;
}
.short-text {
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
<div>apple</div>
<div>jack fruit</div>
<div class="short-text">super puper long title for fruit</div>
<div>watermelon</div>
<span class="short-text">should look like this...</span>