How to split long lines of text in menu bar?

[somenxavier]

I try to break lines to menu bar: now I have very long tiddlers titles (see screenshot)

I try to use custom CSS rules but these don’t work (for example see “Estratègies metodològiques per a l’ensenyament c…”:

.tc-tab-content {
    word-break: break-all;
  display: block;
}

[EricShulman]

Give this a try:

.tc-sidebar-lists .tc-menu-list-item {
   white-space:normal;
   word-break:break-word;
   padding-left:1em;
   text-indent:-1em;
}

Notes:

• white-space:normal overrides the TWCore default of white-space:nowrap
• word-break:break-word is nicer than word-break:break-all since it won’t split a word across lines
• padding-left:1em; combined with text-indent:-1em; adds padding to any extra lines but leaves the first line alone

enjoy,
-e

[daretobelieve]

Hi @EricShulman,

I follow your solution but I still have some minor issue as follows.

1. My subtitle is too long and I wish to have it break to next line at the position align with Donate and More Tab
2. There is a tiny line below the “more” tab that goes on to end of the right screen. Is there any way to limit that line at the position exactly after the More Tab?
3. As you can see from the screenshot, the long tiddler title will break to the next line but there is some indentation in the second line. I wish to make the second line to have zero indentation so it will fall align with the first line. Is it possible?

Thank you before

[Springer]

If I understand correctly, @daretobelieve, you basically want the sidebar content to be less wide.

Is there some reason you don’t simply make your sidebar itself less wide?

If you want the overall sidebar to continue to be this width, but with lots of “blackspace” (like whitespace, but in dark theme ) at right margin, you can add padding to your css.

But maybe you can say a bit more about what really matters — including how you want the page to handle things when the window is resized — so that the solution is not just creating a rigid rule that causes other problems down the road.

[daretobelieve]

Hi @Springer

Actually I am very newbie in this kind of thing. I just want to increase the right margin of the side bar so that the subtitle, the line, and the tiddler title will be squezzed.

I search the forum and find this topic with similar with what I need so I ask the question here. If there is another solution by adding the padding to CSS, I would very welcome.

Another information

• I use Grok plugin
• I use fixed story, fluid sidebar setting

Thank you before

[TW_Tones]

People have produce plugins or code to change the sidebar width but Control Panel > Appearance > Theme Tweeks > Sidebar width allows to to alter it.

Also have you tried zooming in or out in tiddlywiki?

• ctrl-+ and Ctrl-(-)
• Ctrl mouse roller

[daretobelieve]

Hi @TW_Tones

I have tried before and it did not work. I think it is because I’m using fixed story, fluid sidebar setting.

I do realize there is a plugin that you publish somewhere. I have tried it too but it did not meet my needs. I just need to increase the sidebar margin / padding to right of the screen so that my subtitle, my tiddler title and the line below the more tab to be squeezed. In my case, to change the zooming in or out is not suitable.

I think the solution is to add padding to my CSS like @Springer mention above but I’m lacking the knowledge how to do it.

Thank you again

[daretobelieve]

This is what I need, to resize the sidebar that the subtitle(red line), the line (red line) and the tiddler title (red line) will be limited up to the white line

[TW_Tones]

If the subtitle is the only thing causing this you could make it small text.

I use the Fluid Story, Fixed sidebar as a rule.

[daretobelieve]

I’m sorry if I let you down, I prefer to have the subtitle to be the same size and to use fixed story, fluid sidebar which personally I fell more aesthetic. Any other suggestions?

[TW_Tones]

Perhaps you could edit the subtitle and insert <br> to force linefeeds ?

• I am not sure if that will fix the size

[Alvaro]

If I understand you correctly, you want fixed width for story and sidebar. If you are using the Fixed story, fluid sidebar then you will need to set the width to your sidebar. Because its content have elements that use 100% of width of their parent element.

Something like:

.tc-sidebar-scrollable{
    width: {{$:/themes/tiddlywiki/vanilla/metrics/sidebarwidth}};
}

I took the default value for the sidebar when you use Fluid story, fixed sidebar, but you should set to fit your needs using its field on theme tweaks.

The sidebar will always have that width.

[daretobelieve]

Hi @Alvaro
Sorry late to reply due to time difference.
I try your suggestion, I copy the code and paste in the custom style sheet tiddler, I try to use several value of the sidebarwidth from the theme tweaks of control panel. It turns out nothing happen at all, no change whatsoever in my sidebar. Is there something missing that I have not done?

Below is the screenshot

Many thanks

[daretobelieve]

Hi

I try your suggestion, the space between the wiki title and the subtitle indeed increase but the sidebar length is still the same. Below is the screenshot

Blessings

[TW_Tones]

What I am not clear about @daretobelieve, is I use “Fluid Story, fixed sidebar”, and thus use the Sidebar width to suit me, in both cases the content of the Site subtitle will break to fit in the available space, I then use the Zoom feature to size the page for readability.

• For very long links they are word wrapped in the Open tab, but not the Contents and Recent tabs.
  • Perhaps Eric’s solution above that fixes the recent tab, could move into the core, and similar done for the TOC sidebar / macros.
  • An alternative may be to truncate the titles “this is a long title…” and mouse over shows the full title.

What is important here is the user interface is very customisable, but the further you go from the standard you need to study it for the impact in other aspects of the layout.

[daretobelieve]

Hi @TW_Tones

I try to follow your suggestion

1. I change to fluid story, fixed sidebar like below

2. Because the side bar is too far right, I change the sidebar width from 350 to 500 like below

and

3. The end result is still not fits with what I need. I just need to make like below mockup

Is it possible to achieve the above screenshot ?

[etardiff]

@Alvaro’s suggestion works for me, as does this slight variation:

.tc-sidebar-header {
    width: {{$:/themes/tiddlywiki/vanilla/metrics/sidebarwidth}};
}

I’d double-check your stylesheet tiddler. Is it possible that it has the text/css type? If so, that’s probably the problem: wikitext isn’t parsed the same way in tiddlers with different types, so the stylesheet won’t be able to retrieve the transcluded width. If you set the type to text/vnd.tiddlywiki instead (or just delete the type field), it ought to start working.

[TW_Tones]

I also added some right padding;

.tc-sidebar-header {
    width: 350;
   padding: 0 1em 0 0;
}

+ Eric's CSS

When trying to resolve issues like this it is worth trying changes on tiddlywiki.com and/or a copy of empty.html to check you have not retained a change you introduced while truing to fix it.

But one observation is if you add new side bar tab it will be placed after the more, unless it is too long.

A common approach is to use the browsers inspect tool to identify the class’s in use for a given area.

Not sure I can help more than that, as I am no CSS expert.

[daretobelieve]

Hi

You’re right, when I use text/vnd.tiddlywiki it works now. I don’t know this misusing type issue will affect so much to the result. Thank you for noticing my error

[daretobelieve]

Hi @TW_Tones

Thank you for following up my issue and giving many guidance and advice. I also insert your last suggestion like below

Many thanks for your help and assistance
Blessings
Fendy