Ability to style line breaks created with key combo

Lame I know, but I have a good number of people clients that love to have their content Headings displayed in specific ways instead of allowing the auto sizing to work for them. So, in order to accommodate this I usually end up having to put in manual components with line breaks in them so I can add styles to them.

For example, today I just had a 12 word heading for a content block added to a page. I works fine when resizing on different viewpoints for the most part. The client decided they wanted to split it up into 3 specific lines of text. To do what she wants I have to add line breaks in various places and adjust those for specific break points so that the text flows well from size to size. It’s tedious at best because I have to do these all manually with custom code blocks for the line breaks in order to add classes to them so they show/hide on different break points.

It works, yes, but would be so much easier if:

  1. We add our line breaks using Shift+Enter (thanks for adding that!)
  2. We find the line break in the HTML and target it.
  3. We go to the options tab and it actually would have a setup for the line breaks or targeted item.

Right now if I try to do this it is not reading the line break that I have targeted, it is reading it as the entire text block so anything I change affects the text block, not just the line break.

This really could and probably should be set up as a generic thing so that it will save you work having to add it for other things later. This way whatever we target has the ability to have it’s own attributes. Nothing I target should be detected as what it’s included in truly.

Hopefully this will get some love. In the meantime I’m having to add the line breaks manually with a created component.

I have to be honest, I’m trying to understand what you’re describing/requesting, but I’m not following your post very well. When you say “content titles” are you talking about the title attribute, that causes the little text bubble to popup when you hover over something?

I searched for “title” in the components, and nothing comes up. Are you talking about headings?

I admit I am confused. I can see that what you’re describing has something to do with text (paragraphs I assume) because you’re mentioning “line breaks.” Are you trying to apply different attributes to different parts of text in the same <p>? Wouldn’t that normally be done with spans, or just a new paragraph?

Maybe you could do a short screen recording of what you’re doing, and that might clarify it.

I’ve reworded and added an example, let me know if it’s clearer now. Thanks for catching that, I was really tired when I wrote it lol.

Okay, I think I’m getting what you’re saying. Sometimes I have headings that look fine at LG and XL, but when I go down to MD or SM, the way the line breaks makes for an ugly looking heading.

One or the tricks I’ve found is to use the non-breaking space (shift+space.) So for example, if I have a heading that normally stays on one line at LG and XL, but then when it hits MD one word of the heading jumps to a second line, the heading just looks ugly and off balanced. But if I use a line break to move some of the other words to the second line, to make it look more balanced, then when I go back to LG or XL, it stays broken in two lines.

So what I do is I use non-breaking spaces to force words to stay “connected” together when the screen size shrinks.

Not sure if this helps address your problem or not.

2 Likes

Nice tip ! I just tried it.