tab titles breaking wrong for multi-word titles

Can you provide a link to the page on your site where you’re including this tab group?

Without seeing the page I can offer a few ideas that I have used when my tab group has been too wide to fit the page

• use shorter title text on one or more of the tabs — if a word or two can be omitted without losing the meaning of the title
• use fewer tabs — if a large tab group can be broken into two smaller tab groups
• Use custom CSS as outlined in the documentation to make one of the following changes or a combination of two or more of these:

• Use a smaller font-size on the tabs
• Use a smaller value for the left & right padding on the tabs
• Use a smaller value for the right margin on the tabs
• Specify a narrower font for the tabs
• Change the breakpoint value specified in the media queries so the tab group changes to an accordion display at a larger viewport width than is currently specified

thanks for the response – great ideas.

I’ve done all of these. I really enjoyed modifying the CSS to get the tabs just the way I want them.

I still have some tabs that must be multi-word, so am back to the original questions. Do you know where (in WordPress) I can keep a multi-word tab from breaking across 2 tab rows? Is there another way to specify the title=”” for each tab so that they don’t break across rows?

example:
Introduction “Using the TPC Desktop” “New Release” <- keep this on 1 row
COGO Geodetics “Cadastral PLSS” “BLM Project” Reports.

The plugin and the jquery script it is built around were not designed to be used with more than one row of tabs, so making it look less broken when it displays multiple rows isn’t really within the scope of the free support I am able to provide.

I don’t mind having a look though – can you provide a link to the page on your site where you’re including this tab group?

If you use non breaking spaces instead of spaces in your tab titles it might help:  

Or you could try tweaking the customised version of the styles, starting with:

.responsive-tabs .responsive-tabs__list__item {
	white-space: nowrap;
	float: left;
}

.responsive-tabs .responsive-tabs__panel {
	clear: left;
}