I don't know why this simple CSS isn't working...
.app a {_x000D_
height: 18px;_x000D_
width: 140px;_x000D_
padding: 0;_x000D_
overflow: hidden;_x000D_
position: relative;_x000D_
margin: 0 5px 0 5px;_x000D_
text-align: center;_x000D_
text-decoration: none;_x000D_
text-overflow: ellipsis;_x000D_
white-space: nowrap;_x000D_
color: #000;_x000D_
}
_x000D_
<div class="app">_x000D_
<a href="">Test Test Test Test Test Test</a>_x000D_
</div>
_x000D_
Should cut off around the 4th "Test"
text-overflow:ellipsis;
only works when the following are true:
px
(pixels). Width in %
(percentage) won't work.overflow:hidden
and white-space:nowrap
set.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:
display:inline-block
or display:block
(probably the former, but depends on your layout needs).display:block
and give that element a fixed width
or max-width
.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; it works very much like the display:inline
that it's using currently as far as the layout is concerned, but feel free to experiment with the other points as well; I've tried to give as much info as possible to help you understand how these things interact together; a large part of understanding CSS is about understanding how various styles work together.
Here's a snippet with your code, with a display:inline-block
added, to show how close you were.
.app a {_x000D_
height: 18px;_x000D_
width: 140px;_x000D_
padding: 0;_x000D_
overflow: hidden;_x000D_
position: relative;_x000D_
display: inline-block;_x000D_
margin: 0 5px 0 5px;_x000D_
text-align: center;_x000D_
text-decoration: none;_x000D_
text-overflow: ellipsis;_x000D_
white-space: nowrap;_x000D_
color: #000;_x000D_
}
_x000D_
<div class="app">_x000D_
<a href="">Test Test Test Test Test Test</a>_x000D_
</div>
_x000D_
Useful references:
Also make sure word-wrap
is set to normal for IE10 and below.
The standards referenced below define this property's behavior as being dependent on the setting of the "text-wrap" property. However, wordWrap settings are always effective in Windows Internet Explorer because Internet Explorer does not support the "text-wrap" property.
Hence in my case, word-wrap
was set to break-word (inherited or by default?) causing text-overflow
to work in FF and Chrome, but not in IE.
You just add one line css:
.app a {
display: inline-block;
}
I had to make some long descriptions ellipse(take only one lane) while being responsive, so my solution was to let the text wrap(instead of white-space: nowrap
) and instead of fixed width I added fixed height:
span {_x000D_
display: inline-block;_x000D_
line-height: 1rem;_x000D_
height: 1rem;_x000D_
overflow: hidden;_x000D_
// OPTIONAL LINES_x000D_
width: 75%;_x000D_
background: green;_x000D_
// white-space: normal; default_x000D_
}
_x000D_
<span>_x000D_
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi quia quod reprehenderit saepe sit. Animi deleniti distinctio dolorum iste molestias reiciendis saepe. Ea eius ex, ipsam iusto laudantium natus obcaecati quas rem repellat temporibus! A alias at, atque deserunt dignissimos dolor earum, eligendi eveniet exercitationem natus non, odit sint sit tempore voluptate. Commodi culpa ex facere id minima nihil nulla omnis praesentium quasi quia quibusdam recusandae repellat sequi ullam, voluptates. Aliquam commodi debitis delectus magnam nulla, omnis sequi sint unde voluptas voluptatum. Adipisci aliquam deserunt dolor enim facilis libero, maxime molestias, nemo neque non nostrum placeat reprehenderit, rerum ullam vel? A atque autem consectetur cum, doloremque doloribus fugiat hic id iste nemo nesciunt officia quaerat quibusdam quidem quisquam similique sit tempora vel. Accusamus aspernatur at au_x000D_
</span>
_x000D_
MUST contain
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
MUST NOT contain
display: inline
SHOULD contain
position: sticky
I have been having this problem and I wanted a solution that could easily work with dynamic widths. The solution use css grid. This is how the code looks like:
// css
.parent{
display: grid;
grid-template-columns: auto 1fr;
}
.dynamic-width-child{
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
.fixed-width-child{
white-space: nowrap;
}
.
// html
<div class="parent">
<div class="dynamic-width-child">
iiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiii asdfhlhlafh;lshd;flhsd;lhfaaaaaaaaaaaaaaaaaaaa
</div>
<div class="fixed-width-child">Why?-Zed</div>
I faced the same issue and it seems like none of the solution above works for Safari. For non-safari browser, this works just fine:
display: block; /* or in-line block according to your requirement */
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
For Safari, this is the one that works for me. Note that the media query to check if the browser is Safari might change over time, so just tinker with the media query if it doesn't work for you. With line-clamp
property, it would also be possible to have multiple lines in the web with ellipsis, see here.
// Media-query for Safari-only browser.
@media not all and (min-resolution: 0.001dpcm) {
@media {
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
display: -webkit-box;
white-space: normal;
}
}
You can also add float:left; inside this class #User_Apps_Content .DLD_App a
Add display: block;
or display: inline-block;
to your #User_Apps_Content .DLD_App a
https://stackoverflow.com/a/53784508/5626747
Can't comment due to reputation, so I'm making another answer:
In this case you will also have to remove the generally suggested display: block;
property from the element you set the text-overflow: ellipsis;
on, or it will cut off without the ... at the end.
The accepted answer is awesome. However, you can still use %
width and attain text-overflow: ellipsis
. The solution is simple:
display: inline-block; /* for em, a, span, etc (inline by default) */
text-overflow: ellipsis;
width: calc (80%); /* The trick is here! */
It seems whenever you use calc
, the final value is rendered in absolute pixels, which consequentially converts 80%
to something like 800px
for a 1000px
-width container. Therefore, instead of using width: [YOUR PERCENT]%
, use width: calc([YOUR PERCENT]%)
.
Include the four lines written after the info for ellipsis to work
.app a
{
color: #fff;
font: bold 15px/18px Arial;
height: 18px;
margin: 0 5px 0 5px;
padding: 0;
position: relative;
text-align: center;
text-decoration: none;
width: 140px;
/*
Note: The Below 4 Lines are necessary for ellipsis to work.
*/
display: block;/* Change it as per your requirement. */
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
anchor
,span
... tags are inline elements by default, In case of inline elements width
property doesn't works. So you have to convert your element to either inline-block
or block level
elements
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>_x000D_
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />_x000D_
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>_x000D_
_x000D_
<!-- Inline level -->_x000D_
<span class="d-inline-block text-truncate" style="max-width: 250px;">_x000D_
The quick brown fox jumps over the lazy dog._x000D_
</span>
_x000D_
Write these in your css rule.
display: block; /* or in-line block according to your requirement */
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
So if you reach this question because you're having trouble trying to get the ellipsis working inside a display: flex
container, try adding min-width: 0
to the outmost container that's overflowing its parent even though you already set a overflow: hidden
to it and see how that works for you.
More details and a working example on this codepen by aj-foster. Totally did the trick in my case.
Source: Stackoverflow.com