Html/CSS Ellipsis

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 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:

  • Set the element to display:inline-block or display:block (probably the former, but depends on your layout needs).
  • Set one of its container elements to display:block and give that element a fixed width or max-width.
  • Set the element to 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 {

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 the direction 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. The unicode-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



Leave a reply



Submit