04/May/24 | Reflow Speed Dial Labels in two Rows
-
//Edited on 04/05/24
What's this?
A small CSS workaround to reflow the labels of Speed Dials [related request] into two rows allowing to see more text/URLs before having the words clipped. It works better with renamed speed dial bookmarks as longer URLs and words assupercalifragilisticexpialidocious
could be not correctly truncated.
Tested on Vivaldi 6.7.3329.16
/* Speed Dial | Wrap speed dial text on two rows */ .dials .dial .button-title { text-align: center; text-overflow: clip; white-space: pre-wrap; height: 31px; line-height: 11px; margin-top: -5px; }
Legacy versions (Vivaldi 3.x):
Vivaldi 3.7
/* Two rows text */ .dials .dial .button-title { text-overflow: clip !important; white-space: pre-wrap !important; height: 162%; line-height: 90%; border-radius: 0px; text-align: center !important; }
Vivaldi 3.6
/*Speed Dial MultiRow text*/ .dials .dial .button-title { text-overflow: clip; height: 172%; line-height: 90%; white-space: pre-wrap; border-radius: 0px; } /*Adapt edit box to multirows*/ .dials .dial .editable-title-container > input, .dials .dial .editable-title-container > input:active { height: 172%; border-radius: 0px !important; /*enforce radius*/ }
By default, it shows three lines: for two rows replace both the
height: 172%
withheight: 122%
.
Remove the twoborder-radius
lines to let Vivaldi decide the radius (following theme settings).
Editing is still on one row, not sure if it can be done with css.
-
Added to the list of "Mods Pending Tests"
:smiling_face_with_open_mouth_smiling_eyes:
-
@Hadden89
Exactly what i was looking for (on the first try). I was fed up with the text being truncated!!
It's easy, it's simple.
Thank you very much -
//edit: I just cleaned up the thread a bit
-
@Hadden89
Try-webkit-line-clamp: 3;
Then use
.dials .dial .editable-title-container.edit
class for when editing text. -
New version for 4.x
-
@Hadden89 Hey! Thanks for this little Css mod
Made a few pixel adjustments to my taste and solves the problem of worthless site thumbnails. Now if we could just get the "texty thumbnails" as an option it would look even better
-
@lfisk feel free to share you code here or open a new thread.
Speed dial area change often, and may helps others too