Let's say I have a string "I like big butts and I cannot lie" and I cut it with overflow:hidden, so it displays something like this:
I like big butts and I cann
cutting off the text. Is it possible to display this like this:
I like big butts and I cann...
using CSS?
You can use text-overflow: ellipsis; which according to caniuse is supported by all the major browsers.
Here's a demo on jsbin.
.cut-text {
text-overflow: ellipsis;
overflow: hidden;
width: 160px;
height: 1.2em;
white-space: nowrap;
}
<div class="cut-text">
I like big butts and I can not lie.
</div>
Check the following snippet for your problem
div{
width : 100px;
overflow:hidden;
display:inline-block;
text-overflow: ellipsis;
white-space: nowrap;
}
<div>
The Alsos Mission was an Allied unit formed to investigate Axis scientific developments, especially nuclear, chemical and biological weapons, as part of the Manhattan Project during World War II. Colonel Boris Pash, a former Manhattan P
</div>
Try this if you want to restrict the lines up to 3 and after three lines the dots will appear. If we want to increase the lines just change the -webkit-line-clamp value and give the width for div size.
div {
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
}
Hopefully it's helpful for you:
.text-with-dots {
display: block;
max-width: 98%;
white-space: nowrap;
overflow: hidden !important;
text-overflow: ellipsis;
}
<div class='text-with-dots'>Some texts here Some texts here Some texts here Some texts here Some texts here Some texts here </div>
Hide text on load and show on hover
.hide-text {
width: 70px;
display: inline-block;
white-space: nowrap;
overflow: hidden !important;
text-overflow: ellipsis;
}
span:hover {
white-space: unset;
text-overflow: unset;
}
<span class="hide-text"> How to hide text by dots and show text on hover</span>
Yes, via the text-overflow property in CSS 3. Caveat: it is not universally supported yet in browsers.
In bootstrap 4, you can add a .text-truncate class to truncate the text with an ellipsis.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<!-- Inline level -->
<span class="d-inline-block text-truncate" style="max-width: 190px;">
I like big butts and I cannot lie
</span>
<!DOCTYPE html>
<html>
<head>
<style>
.cardDetaileclips{
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 3; /* after 3 line show ... */
-webkit-box-orient: vertical;
}
</style>
</head>
<body>
<div style="width:100px;">
<div class="cardDetaileclips">
My Name is Manoj and pleasure to help you.
</div>
</div>
</body>
</html>
<style>
.dots
{
display: inline-block;
width: 325px;
white-space: nowrap;
overflow: hidden !important;
text-overflow: ellipsis;
}
.dot
{
display: inline-block;
width: 185px;
white-space: nowrap;
overflow: hidden !important;
text-overflow: ellipsis;
}
</style>
Most of solutions use static width here. But it can be sometimes wrong for some reasons.
Example: I had table with many columns. Most of them are narrow (static width). But the main column should be as wide as possible (depends on screen size).
HTML:
<table style="width: 100%">
<tr>
<td style="width: 60px;">narrow</td>
<td>
<span class="cutwrap" data-cutwrap="dynamic column can have really long text which can be wrapped on two rows, but we just need not wrapped texts using as much space as possible">
dynamic column can have really long text which can be wrapped on two rows
but we just need not wrapped texts using as much space as possible
</span>
</td>
</tr>
</table>
CSS:
.cutwrap {
position: relative;
overflow: hidden;
display: block;
width: 100%;
height: 18px;
white-space: normal;
color: transparent !important;
}
.cutwrap::selection {
color: transparent !important;
}
.cutwrap:before {
content: attr(data-cutwrap);
position: absolute;
left: 0;
right: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
color: #333;
}
/* different styles for links */
a.cutwrap:before {
text-decoration: underline;
color: #05c;
}
.cut-text {
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
Related
I'm trying to make my text fit the height of this card and hidden the overflow using ellipsis, as you can see if I use white-space: no wrap, it works but makes my block of text one line. If I use "normal" I get my block back but the ellipsis is gone... How can I achieve this?
<vx-card >
<template slot="actions">
<span class="text-grey">{{Time | moment("MM/D/YYYY, h:mm:ss a")}}
</span>
</template>
<p class="myoverflow" >{{PostContent}}</p>
<div slot="footer">
<vs-row vs-justify="flex-end">
<vs-button color="primary" type="gradient" >View</vs-button>
<vs-button color="danger" type="gradient" >Delete</vs-button>
</vs-row>
</div>
</vx-card>
css:
.myoverflow{
text-overflow: ellipsis;
height: 100px;
width: 100%;
display: inline-block;
white-space: nowrap;
overflow: hidden;
}
.myoverflow{
text-overflow: ellipsis;
height: 100px;
width: 100%;
display: block;
white-space: normal;
overflow: hidden;
}
this should fix your problem:
.myoverflow{
-webkit-box-orient: vertical;
display: -webkit-box;
-webkit-line-clamp: 2;
overflow: hidden;
text-overflow: ellipsis;
white-space: normal;
}
jsfiddle attached:
https://jsfiddle.net/3d6fhrcL/
I have following structure in dropdown suggestions for my autocomplete plugin
<div>
<svg>//some things here</svg>
<span>My long text</span>
<span>Some short text</span>
</div>
The div has following CSS properties -
display: inline-block;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
width: 100%
The span has following properties -
float: left;
I am unable to understand where it went wrong and have tried almost all SO solutions answered in similar problems till date. A desperate callout!
Update: http://codepen.io/shreeshkatyayan/pen/wzPYvO CSS structure - non-working for obvious reasons.
Here are two examples which may help.
Add the overflow to the span instead of the div which will give each span the ellipsis property.
div.one {
display: inline-block;
width: 100%;
}
div.one span {
float: left;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
width: 75px;
margin-right: 10px;
}
Or to give the div the ellipsis property instead of the span, remove float: left from the span and add a width to the div.
div.two {
display: inline-block;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
width: 200px;
}
div.two span {
margin-right: 10px;
//float: left;
}
updated jsfiddle: https://jsfiddle.net/75rmaqwb/1/
There are also several jquery plugins that deal with this issue, but many do not handle multiple lines of text. Following works:
http://pvdspek.github.com/jquery.autoellipsis/
http://dotdotdot.frebsite.nl/
http://keith-wood.name/more.html
http://github.com/tbasse/jquery-truncate
I have the following container of text:
<div class="cardTitles">
<div class="title">
<div class="titleContent">
<i class="fa fa-star-o"></i>
<b>Some long long long title here</b>
</div>
</div>
... title divs ...
</div>
css:
.cardTitles {
width: 100%;
height: 100%;
}
.title
{
position: relative;
padding-top: 8px;
padding-bottom: 8px;
}
I want to make text full width + text-overflow: ellipsis. So when I resize browser all title divs should be full 100% width of the parent cardTitles with cut text to three dots at the end.
I found that this is possible using flex. Here is the possible answer:
.parent-div {
display: flex;
}
.text-div {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
min-width: 0;
}
But this doesn't work for me. Parent container stops resizing when it reach the max length of some child title.
You can find an example here: http://88.198.106.150/tips/cpp/
Try to resize browser and look at title with text: What does it mean that a reference must refer to an object, not a dereferenced NULL pointer. I need to make it overflow ellipsis.
Try this out:
.titleContent {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
Here's and updated jsFiddle
No Flex but could work also ... try it.
.element {
display: table;
table-layout: fixed;
width: 100%;
}
.truncate {
display: table-cell;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
text-overflow ellipsis with 100% width
The width needs to be added in pixels, percentage wont work along with other three properties as given below:-
.text-ellipsis{
max-width: 160px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
#div1 {
white-space: nowrap;
width: 12em;
overflow: hidden;
text-overflow: clip;
border: 1px solid #000000;
}
#div2 {
white-space: nowrap;
width: 12em;
overflow: hidden;
text-overflow: ellipsis;
border: 1px solid #000000;
}
The following two divs contains a long text that will not fit in the box. As you can see, the text is clipped.
This div uses "text-overflow:clip":
This is some long text that will not fit in the box
This div uses "text-overflow:ellipsis":
This is some long text that will not fit in the box
I have the following:
Fiddle link
html:
<button>Here's a long chunk of text</button>
css:
button {
width: 80px;
overflow: hidden;
}
Basically, I want the button not to wrap the text..
I'm sure I'm just missing something obvious, but I can't figure it out...
Add the following style to prevent line breaks:
{
white-space: nowrap;
}
Updated Fiddle
EDIT
Now, since you're trying to hide the overflow, I'd suggest to use text-overflow: ellipsis; to give better looks to the text cut, adding a (...) at the end:
Another Updated Fiddle
button {
width: 80px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
<button>Here's a long chunk of text</button>
You can use white-space: nowrap;:
button {
width: 80px;
overflow: hidden;
white-space: nowrap;
}
<button>Here's a long chunk of text</button>
Add white-space:nowrap;
button {
width: 80px;
overflow: hidden;
white-space:nowrap;
}
jsFiddle example
add white-space: nowrap; and word-wrap: normal;
word-wrap: The word-wrap property allows long words to be able to be broken and wrap onto the next line.
white-space: The white-space property specifies how white-space inside an element is handled.
button {
width: 80px;
overflow: hidden;
white-space: nowrap;
word-wrap: normal;
}
<button>Here's a long chunk of text</button>
I would like to cut off some long text using an ellipsis.
However, with my current implementation, it doesn't include extra words that would cause it to go beyond the div and does not show ellipsis to indicate that the text is cut off.
What am I doing wrong?
http://jsfiddle.net/sw6Sp/6/
<div class="testWrap">This is some very long text that I want to cut off </div>
.testWrap{
max-width: 125px;
height:15px;
overflow: hidden;
text-overflow:ellipsis;
border: 1px solid black;
}
Just use text-overflow: ellipsis along with white-space: nowrap.
Updated Example
.testWrap {
width: 125px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
Adding the css-rule white-space: nowrap; should solve your problem.
<div class="testWrap" style="
max-width: 125px;
height:15px;
overflow: hidden;
text-overflow:ellipsis;
border: 1px solid black;
white-space: nowrap;
">This is some very long text that I want to cut off </div>
If you want to use ellipsis without white-space: nowrap, use these CSS rules
white-space: pre-line;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;