xxxxxxxxxx
div {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
xxxxxxxxxx
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
xxxxxxxxxx
p,span,label{ // on child
display: inline-block;
text-overflow: ellipsis;
white-space: nowrap;
width:10px;
}
div{
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
width:100%;
}
xxxxxxxxxx
p {
display: -webkit-box;
max-width: 200px;
-webkit-line-clamp: 4;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
}
xxxxxxxxxx
.container {
overflow:hidden;
}
.ellipsis {
text-overflow: ellipsis; /* enables ellipsis */
white-space: nowrap; /* keeps the text in a single line */
overflow: hidden; /* keeps the element from overflowing its parent */
}
.multiline-ellipsis {
overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3; /* start showing ellipsis when 3rd line is reached */
white-space: pre-wrap; /* let the text wrap preserving spaces */
}
xxxxxxxxxx
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
display: inherit;
xxxxxxxxxx
width: 250px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
xxxxxxxxxx
p {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
xxxxxxxxxx
.overflowing {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
xxxxxxxxxx
THE BEST EXPLANATION
====================
text-overflow:ellipsis; only works when the following are true:
1. The element's width must be constrained in px (pixels).
2. Width in % (percentage) won't work.
3. The element must have:
overflow:hidden;
white-space:nowrap;
- The reason you're having problems here is because
the width of your a element isn't constrained.
- You do have a width setting,but because the element
is set to display:inline (i.e. the default) it is
ignoring it, and nothing else is constraining its
width either.
- You can fix this by doing one of the following:
1. Set the element to display:inline-block or display:block.
2. Set one of its container elements to display:block
and give that element a fixed width or max-width.
3. Set the element to float:left or float:right
(probably the former, but again, either should
have the same effect as far as the ellipsis is concerned).
- I'd suggest display:inline-block, since this will have
the minimum collateral impact on your layout