Hello,
This might not be very closely related to the responsive styling, but I’ve noticed that you’ve added the ellipsis option to headlines now, which I think is a good option to have. But I wondered if you could also give us the option to choose the number of lines to ellipse as well.
Also, adding this to the text element will be a good option as well.
Howdy, @Maratopia_Digital!
Thanks for writing in! Believe it or not, that ellipsis option has always been present on the Headline Element, it was just present in slightly different manner on previous releases (as a checkbox). It’s definitely a very helpful option to explore! The reason it’s more “prominent” now comes from the fact that with this release being centered around responsive styling, all controls needed to have their own unique side-label to help display the status of responsively changed values. This means that a lot of old controls which were previously side-by-side within a row were broken out into their own lines. One great thing with this is it allowed us to make the labeling more clear for many features, and it also helps to highlight things in a more equitable manner.
As for choosing the number of lines to ellipse at, I think we might be nearing a state where that could be possible. That particular styling feature is known as a line-clamp in CSS, and is still not universally supported:
https://caniuse.com/?search=line-clamp
You can see that IE11 isn’t supporting it at all, but most other browsers support it with a vendor prefix. We’re kind of at a place in general with IE11 support where we have begun to add in features that may not totally work across all browsers universally (such as the “Specialty” controls in the Effects Module, which have a description on their label mentioning this), so I will think on this some more.
As for the Text Element, we have a different feature on that Element that is more suited to it’s purposes. While the Headline Element is intended to be used for “single-line” text (i.e. short, text-exclusive content), the Text Element is intended for longform content, and might technically include other forms of media such as images, videos, et cetera, depending on how you’re using it. Because of this, the Text Element has a different feature called “Text Columns,” which you can see enabled in this screenshot:
This feature is actually one of the more powerful options in the entire builder that I don’t think gets enough credit. It uses the CSS3 multiple column layout spec, which allows users to do some really cool things. Very simply, you can do something like the image above where you setup a rule saying: “I’d like at most 3 columns, and for those columns to never be smaller than 250px wide if possible, and space them out by 50px.” The spec will take this info, and responsively break your content down for you as those rules are met, so at a certain point things will automatically break to 2 columns when it absolutely has to, and ultimately 1 column.
We actually used this feature for the excerpt text on our Postmodern Pixels archive layout in Design Cloud. Take note of how the text starts as 2 columns, then breaks to 1 at some point, and then when the layout shifts on mobile it goes back up to 2 columns because it has more space again, and then ultimately back down to 1. When leveraging these features properly, it allows users to achieve all sorts of amazing auto-responsive layouts that would otherwise be quite cumbersome to manage manually.
Anyway, hopefully that all helps give a little more context. Thanks again for writing in and do let me know if you have any further questions!
Hey Kory,
Thanks for the very detailed reply and explanation on the Text Columns, pretty cool stuff.
The main purpose that I thought this would be ideal for the Text Element as well would be for short descriptions on product grid layouts such as the below:
Where sometimes short descriptions are longer than you would really want them so adding a line-clampgives it a nice clean look across all product descriptions.
Would love it if it could be more accessible in the builder rather than custom code it.
Thanks for considering it anyway. Looking forward to hearing back on this
@Maratopia_Digital, no problem at all! The thing to keep in mind as well is that even though the Element is labeled “Headline,” it can still be used for something like what you’re describing here (a line clamped short excerpt). Since the Headline Element gives you control over the wrapping Element to some extent, it doesn’t always have to be in a <h*> tag. If the line-clamp feature gets added, it would likely be to the Headline because of the way it’s meant to function, but I it might possibly work in the Text Element as well, I’d just have to see what might work best. Either way, you’d be able to use it for exactly the situation you’re describing here. We will keep you posted if that somehow makes it into this release, but the primary focus of everything at the moment is on responsive styling, so we will have to see.
Thanks again for your input!
Hey @kory,
Ah, that is true, I guess I’m just so used to the Headline being more of a Heading that I forget it can actually be just ordinary text as well. Thanks for considering it though, and hopefully it gets added at some point. But I do understand that it is more of a nice to have than an actual necessity.
No worries! Definitely something we want to look into, just need to find the time and also consider browser support as it’s still a bit wonky at this time. I tested this some yesterday on CodePen and it’s pretty much webkit specific at this point until the new CSS3 spec for an updated line-clamp property gets implemented. You can see that here:
It basically requires all of these properties:
p {
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 4;
-webkit-box-orient: vertical;
}
So as mentioned, it’s very vendor-specific, but with most browsers supporting the webkit prefix these days (even Firefox in some instances…and now Edge since they’ve gone WebKit), it could work. I just want to do some more research before introducing something like that into the tool.
Just wanted to give you a bit more perspective there, hopefully that helps!