CSS text-overflow: ellipsis; not working?
text-overflow:ellipsis;
only works when the following are true:
- The element's width must be constrained in
px
(pixels). Width in%
(percentage) won't work. - The element must have
overflow:hidden
andwhite-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:
- Set the element to
display:inline-block
ordisplay:block
(probably the former, but depends on your layout needs). - Set one of its container elements to
display:block
and give that element a fixedwidth
ormax-width
. - Set the element to
float:left
orfloat: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 {
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;
}
<div class="app">
<a href="">Test Test Test Test Test Test</a>
</div>
text-overflow: ellipsis is not working in table
It happens because of the display property in table. You need to give a display: block
to make ellipsis work, but it kind of removes how tables should work.
The better thing would be to wrap your td
contents inside a div
and change your CSS.
Option 2 would be using max-width to your
td`.
<td width="50px">
<div>Hello World</div>
</td>
CSS to:
td>div {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
width: 50px
}
OR Just add max-width
.container {
display: flex;
flex-direction: row;
}
p,
td>div,td {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 50px;
}
<div class="container" style="width:100px; background-color: red">
<p width="50px">
Hello world
</p>
<p width="50px">
Hello world
</p>
</div>
<table style="background-color: green">
<tr width="100px">
<td width="50px">
<div>
Hello World</div>
</td>
<td width="50px">
<div>
Hello World</div>
</td>
<td width="50px">
Hello World
</td>
</tr>
</table>
CSS text-overflow: ellipsis wrapping on nested div structure
You are very close to your expected result.
Change .inner
from inline-block
to inline
.
.inner {
display: inline;
}
html, body {
width: 100%;
}
.outer {
background-color: lavender;
display: inline-block;
max-width: 30%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.inner {
display: inline;
}
.inner>* {
display: inline;
}
.inner>:first-child::after {
content: "~"
}
<html>
<body>
<div class="outer">
<div class="inner">
<div>left1</div>
<div>right1</div>
</div>
<div class="inner">
<div>left2</div>
<div>right2</div>
</div>
<div class="inner">
<div>left3</div>
<div>right3</div>
</div>
<div class="inner">
<div>left4</div>
<div>right4</div>
</div>
</div>
</body>
</html>
How to add an ellipsis on the third line of text?
You can truncate the text using line-clamp
. The ellipsis effect comes from using display: -webkit-box;
and -webkit-box-orient: vertical;
paired with overflow: hidden;
.
.post-desc {
width: 100px;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
border: 1px solid #000000;
}
<p class="post-desc">This is some long text that will not fit in the box.</p>
How can I make ellipsis work in an HTML table?
Why doesn't it use that free space (marked orange below in the screenshot)?
Because your <div>
inside the <td class="col-B">
also has the class col-B
and every element wit class col-B
inside your table will have a width of 75%
which you have specified in your css like so:
table .col-B {
width: 75%;
}
You can change that in multiple ways. One solution is to overwrite the width
of the div
like so:
table th,
table td {
border: 1px solid red;
}
table .col-A {
width: 25%;
}
table .col-B {
width: 75%;
}
table .col-B div {
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
width: 100%; /* only added this line */
}
<table>
<thead>
<th class="col-A">Column A</th>
<th class="col-B">Column B</th>
</thead>
<tbody>
<tr>
<td class="col-A">Value A1</td>
<td class="col-B">Value B1</td>
</tr>
<tr>
<td class="col-A">Value A2</td>
<td class="col-B">
<div class="col-B">Value B2 that is going to be ellipsized, because it's way too long!</div>
</td>
</tr>
</tbody>
</table>
Reversed characters when providing another string to text-overflow: ellipsis;
unicode-bidi
might help you with an extra wrapper to handle text direction:
https://developer.mozilla.org/en-US/docs/Web/CSS/unicode-bidi
The
unicode-bidi
CSS property, together with thedirection
property, determines how bidirectional text in a document is handled. For example, if a block of content contains both left-to-right and right-to-left text, the user-agent uses a complex Unicode algorithm to decide how to display the text. Theunicode-bidi
property overrides this algorithm and allows the developer to control the text embedding.
div {
margin: 10px 0;
border: 1px solid black;
width:max-content;
}
.ellipsis {
width: 400px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
direction: rtl;
}
.ellipsis span {
direction: ltr;
unicode-bidi: bidi-override;
}
<div class="ellipsis">Path to you prefered files that you love so much forever and ever fuck yeah</div>
<div class="ellipsis"><span>1":"#323130",messageLink:t?"#6CB8F6":"#005A9E",messageLinkHovered:t?"#82C7FF":"#004578",infoIcon:t?"#</span></div>
original text :
<div>Path to you prefered files that you love so much forever and ever fuck yeah</div>
<div><span>1":"#323130",messageLink:t?"#6CB8F6":"#005A9E",messageLinkHovered:t?"#82C7FF":"#004578",infoIcon:t?"#</span></div>
CSS ellipsis not working on specific web fonts
The problem with missing ellipse points lies in the font specified for this h2
- font-family: tzur,sans-serif!important
.
Here:
.font-tzur {
font-family: tzur,sans-serif!important;
}
Which are loaded from the font-load-tzur.css
file.
Check the correctness of loading this font tzur
.
For example - If you put a different font, the ellipse points will appear.
Related Topics
Html5: Non-Replaced VS. Replaced Element
CSS Filter:Invert Not Working with Background-Color
Why Is 100% Height Not 100% of the Browser Height
CSS - Hide Options from Select Menu on iPhone & Safari
How to Display Text, a Dotted Line Then More Text Spanning the Width of the Page
Arabic Characters from HTML Content to PDF Using Itext
CSS Text Underlining Too Long When Letter-Spacing Is Applied
How to Start a New Line with a Particular Item with Flexbox
How to Achieve Curved Top Pointer
How to Change the Inner White Color of Font Awesome's Exclamation Triangle Icon
Are Self-Closing Input Tags Valid in HTML 4
A Library to Convert Ansi Escapes (Terminal Formatting/Color Codes) to HTML
How to Move Placeholder to Top on Focus and While Typing
How Is Bootstrap V4 Loading _Reboot.Scss