How to enable line break for titles on webpages?

[LCF-AT]

Hi guys,

got a new question I was trying to find a solution.I see that some webpages do not showing the entire title under thumbnails and just showing them in one line (maybe half only) and the rest is hidden.The problem is also on YT to find.Example...

...above you can see 4 thumbs and for the first 3 you can't read the whole title at once only if you go with the mouse on it.Now I would like to show the entire so how can I do that?For what command I have to look for / or add when checking the dev tools tab?

I marked the target icon after ..grid-media.Now I need to add any new command under "display: block" to change the title text etc but which of them is it to left line break the entire title?Maybe anyone of you does know it and can tell me or say with which commands I should play around etc.Thank you.

greetz

[atom0s]

There are a few CSS properties that can control that kind of thing. The main one being 'overflow: hidden' that is usually used. Text data has multiple properties to control how long things can go for, what amount of space they can take up, when it will cut off with ellipses (via 'text-overflow: ellipsis') and so on.

[LCF-AT]

Hi,

thanks so far.I was trying to play around with those commands you told me but they don't have much effects.Do you have another commands I could check for?

greetz

[kao]

@atom0s is right, it's "overflow: hidden" property.

Before:

Spoiler

Changing the property:

Spoiler

End result:

Spoiler

 

[LCF-AT]

Hi again,

ok I found that entry overflow: hidden but when I uncheck it then nothing get changed.Does it not work on fly?Ok I tried this using uBO...

youtube.com###video-title-link > .ytd-rich-grid-media.style-scope:style(overflow: unset !important)
or
youtube.com##.ytd-rich-grid-media.style-scope:style(overflow: auto !important)

...now overflow: hidden is crossed out but now I see the changes.Entire title is to see etc.Looks not so good now and need to adjust other things too.I didn't knew that this command overflow needs to refresh / reload.Is there a list of such commands which needs a refresh and which not?No wonder that I haven't seen any changes when playing around with diffrent command etc. Thanks again for that info.

greetz

[LCF-AT]

One more question.So I found some examples here...

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Text/Wrapping_Text

...so in case of YT.Is it possible to show entire title text + make a auto-adjustment for all below to prevent overlappings?

On a other site for example was the title written into one line.Now I was playing around with those commands I found...

(overflow: visible)
(white-space: pre-line)
(display: block)
(overflow-wrap: break-word)
(word-break: break-all)

...somehow I got it work that the title now gets linebreak into 2 lines...

original title: AAAAAAAAAA_BBBBBBBBBB_CCCCCCCCCC

AAAAAAAAAA <--- just visible in normal state of webpage

Now when using this command in uBO (white-space: pre-line !important) I get this...

AAAAAAAAAA
_BBBBBBBBBB...    <---- title was line break one time = 2 lines + ...

The question how to make it to see all like this?

AAAAAAAAAA_
BBBBBBBBBB_
CCCCCCCCCC

greetz

[atom0s]

6 hours ago, LCF-AT said:

ok I found that entry overflow: hidden but when I uncheck it then nothing get changed.Does it not work on fly?Ok I tried this using uBO...

Keep in mind the naming of what CSS means. The 'C' is for Cascading. Meaning that elements inherit properties from various levels within the CSS being defined. For example, a div with a specific id and class can inherit properties both from that specific id, that specific class, any div specific properties applied etc. This means that while you did uncheck the 'overflow' property on the top-level element where the text is held, another property could be populating the overflow value beyond that. If you need to override it at that level, you can use CSS's "!important" tagging, such as: 'overflow: visible !important;'

Otherwise you will need to edit all other instances where that element is inheriting the property from.