Category Archives: Doohickies

Tools & technologies or other interesting things.

Multi-line ellipses with max-height

If you have a fixed height on a text area, the options for multi-line ellipses are a little complex – a javascript solution, or this float-drop solution.

But what if you are using max-height?

Turns out the solution is easier!* You just need to absolutely position an ellipses pseudo element at max-height minus the height of the ellipses from the top (eyeballed, I didn’t set a height on the ellipses when I tried this, but you could). And they won’t show if you your content doesn’t reach the max-height you set on the element.

Here’s the code:

<div class="content">This is some shorter content.</div>

<div class="content">This is some longer content. See the ellipses? There they are, in the bottom right-hand corner.</div>

.content {
box-sizing: border-box; <--I usually set this globally
position: relative;
max-height: 3.75em;
overflow: hidden;
padding: 0 5px;
/the rest of these are just for demo purposes/
float: left;
width: 200px;
margin-right: 50px;
}

.content:after {
content: "\02026";
position: absolute;
top: 2.4em; right: 5px;
width: 3em;
background: linear-gradient(to right, rgba(255, 255, 255, 0), #fff 50%, #fff);
text-align: right;
}

Head on over to codepen to view.

*There is one use case where this falls apart, and that is if your content height exactly matches the max-height. This might be enough of an issue that you’d want to go with a javascript solution. 

Who reading this votes that CSS should give us a multi-line ellipses property?

Yes, ladies, we can do math!

I always get excited when I have to use math when I’m programming something, because then when my kids get old enough to complain “Augh, math?! When am I ever going to use this?!”, I’ll actually be able to tell them, “Hey, I actually use math at work!”

Ok, so this particular time it wasn’t something for work, but it’s still math! Here’s the basic problem:

Starting with a spider at point A, swiped to point B, how do you determine a point C offscreen where the spider ends up after being swiped?

This is how I solved the problem using…GEOMETRY! If you have two points, you can calculate the slope (m) and then use the same slope equation to find a y value given an arbitrary x. Here’s the equation to find slope between two points (x, y) and (x1, y1), in case you’re too lazy to google it:

m = (y - y1) / (x - x1)

So using that, we can calculate the slope of the line we create when we swipe the spider from A to B:

m = (A.y - B.y) / (A.x - B.x)

To figure out where point C is, let’s choose an arbitrary x value for C based on the direction of the swipe, and use the same equation to solve for the y value. In our picture above, we’re swiping left (A.x > B.x), so let’s say that C.x is at a position 100 pixels off the left side of the screen, or -100. If we’re swiping right (A.x < B.x), then let’s say that C.x is 100 pixels off the right side, or screensize + 100.

So now that we know the slope and the new x value, we’ll just reswizzle the slope equation above and solve for the new y value:

y = m * (x - x1) + y1

And in our case:

C.y = ((A.y - B.y) / (A.x - B.x)) * (C.x - A.x) + A.y

Here’s a CodePen using the same math I used above. The CodePen example constrains the spider to a box on the page, so I had to take that into account when writing the javascript. Another issue I had was that if your path was a vertical line, the slope ends up being undefined and calculating the y value ended with a value of “Infinity” or “-Infinity”. Did you even know that Javascript had these constants (Number.POSITIVE_INFINITY and Number.NEGATIVE_INFINITY)? I didn’t. Well, now we both know. 🙂

gladys

I actually really loved math in school, especially geometry in 7th grade, because we got to use rulers and compasses to draw graphs. There really is a lot of math you can use when you code, so keep taking those advanced math classes, ladies!