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
<style>
.text-container {
width: 150px; /* specify the desired width */
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
</style>
<div class="text-container">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ut mauris venenatis, aliquet mauris quis, sodales arcu.
</div>
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
.app a {
height: 18px;
width: 140px;
padding: 0;
overflow: hidden;
position: relative;
display: inline-block;
margin: 0 5px 0 5px;
text-align: center;
text-decoration: none;
text-overflow: ellipsis;
white-space: nowrap;
color: #000;
}