vdimov

[vdimov]

Top Free Apps for Weight Loss

Top Free Apps for Weight Loss

Photo by Alesia Kozik on Pexels.com Honestly, I am tired of reading the same things over and over again – plan this, plan that, eat, don’t eat. Weight gain is not just based on the fact that you enjoy food or have a constant appetite or love sweets. I am sure you know people that eat a lot and still stay slim. Yes, that’s right it is in the genes. But this is not the only prepositioning for…

[vdimov]

Guide to Great Juicing

Guide to Great Juicing

Why Green Juicing? lose weight – working from home Living in today’s world, full of toxins, water, air, food, brings upon us a great responsibility. Your body is your temple think of it as whatever the input will equal the output as a universal law! Living in today’s world, full of toxins, water, air, food, brings upon us a great responsibility. How to take care of ourselves, your body is your…

[vdimov]

Semicolon - the New Twitter

Semicolon – the New Twitter

Alternative for Users Seeking The Golden Mean Social media has become a major part of our lives, people have been able to connect from all over the world with friends, family, loved ones and share their thoughts, emotions and experiences.  It is time to recognize that the world around us is changing. The explosion of digital trace data such as countless websites  and apps, online…

[vdimov]

Why text-overflow: ellipsis doesn't work?

You just discovered the text-overflow property and ellipsis. You applied it to your element, but the automatic ... character still didn't show up at the end of the text.

The text-overflow property sets how hidden overflow content is displayed. It can be clipped, display an ellipsis '…', or even display a custom string!

Long story short, you are missing two other properties.

The text-overflow property itself doesn't force an overflow to occur. To make text disappear at the edge of its container you also have to set two other CSS properties: overflow: hidden and white-space: nowrap.

Here's the example:

overflow: hidden; white-space: nowrap;

The text-overflow property only affects content that overflows a block container element in direction of its inline progression which is usually right to left (text doesn't overflow the bottom of the box on line breaks.)

The Ellipsis Character

The ellipsis value will render ellipsis ('…' which in unicode is U+2026 or &­#8230; in HTML, generally known as "Horizontal Ellipsis" in punctuation) to represent clipped text. The ellipsis is displayed inside the content area, decreasing the amount of text displayed. If the text appears longer than the width of its parent container it will clip.

If there is not enough space to display the ellipsis, it is clipped.

text-overflow: ellipsis only works when the following is true:

The element's width must be constrained in px (pixels) – it doesn't work with values specified using % (percent.)

The element must have following properties set: overflow: hidden and white-space: nowrap

Classic problem occurs when the width of your element isn't constrained. You have a width set, but because the element's display property is also set to inline (often the default for spans,) overflow is ignored and because nothing else is constraining container's width text content keeps on expanding together with the parent without triggering overflow.

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.

I'd suggest display: inline-block since this will have the minimum collateral impact on your layout; it works very much like display: inline as far as the layout is concerned, but feel free to experiment with the other points as well.

Here's a snippet with your code, with a display: inline-block added, to show how close you were.

.parent {    height: 32px;    width: 140px;    padding: 0;    overflow: hidden;    position: relative;    display: inline-block;    text-overflow: ellipsis;    white-space: nowrap;    border: 1px solid gray; }

Here's the class applied to parent container:

<div class="parent">Test Test Test Test Test Test</div>

and the result will look as follows:

Test Test Test Test Test Test

You can still use % width and attain text-overflow: ellipsis, but you will have to use it together with the CSS's built-in calc function:

display: inline-block; text-overflow: ellipsis; width: calc (80%);

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.

Hope this article helped!

[vdimov]

www.semicolon.dev

[vdimov]