I'm attempting to get ellipsis working on my site. This is the following HTML / CSS code and it doesn't appear to be working.
CSS:
.oneline {
text-overflow:ellipsis;
white-space: nowrap;
width: 50px;
overflow: hidden;
}
HTML:
<div class="oneline">Testing 123 Testing 456 Testing 789</div>
Based on the initial post, we're all assuming the obvious, but just in case ... ;)
<style type="text/css">
.oneline {
text-overflow : ellipsis;
white-space : nowrap;
width : 50px;
overflow : hidden;
}
</style>
<div class="oneline">Testing 123 Testing 456 Testing 789</div>
http://jsfiddle.net/NawcT/
EDIT: Solution was to style the paragraph vs the div.
Assigning position:absolute to the element to be truncated will probably have less undesired side-effects that float:left.
This worked for me:
div {
position: absolute;
width: 70px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
Related
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 been attempting to get ellipsis to appear when text is two long, on two spans that are next to each other using display: inline-block:
Here is the simplified CSS in a fiddle:
https://jsfiddle.net/IQAndreas/fffo84nq/1/
In fact, I can't even overflow: none to show up properly. Those two span elements have given me nothing but trouble.
You need to add those style to menu-element
.menu-element {
background-color: #DDDDDD;
width: 100%;
cursor: pointer;
overflow:hidden;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
Updated fiddle
Need to specify width for ellipsis to work
#palette-menu .palette-name {
height: 100%;
vertical-align: middle;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
display: inline-block;
width: 66%;
}
DEMO
I have the following situation:
But what I want to do is align right of my container, and if text overflows his container, show ellipsis, instead of now which the alignment is from left.
My expectation:
AAA
BBBBBBBBBBBBBB...
CCC
And in cases where the first or third line contains more characters:
AAAAAAAAAAAAAA...
BBBBBBBBBBBBBB...
CCC
You can do this:
CSS
.box {
display: inline-block;
}
p {
width: 80px;
display: block;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
text-align: right;
}
HTML
<div class="box">
<p>AAAAAAAAAAAAAA</p>
<p>BBBBBBBBBBBBBB</p>
<p>CCC</p>
</div>
DEMO HERE
Using pure CSS, add these attriutes:
text-align:right;
overflow: hidden;
text-overflow: ellipsis;
text-align:right; aligns your text to the right.
overflow: hidden; plus text-overflow: ellipsis; will make text overflow and be replaced by an ellipsis.
Working example
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
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;
}