Text line doesn't break into the next line if it doesn't has spaces

You need to ensure that you don’t use “bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbqq bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb11” as a tab title. If you need to use that as a tab title, I don’t think this is the right plugin to use.

This plugin was designed to support a short piece of text on a single line for each tab title only, and the width of all tabs in a tabgroup should not be so wide as to wrap to two lines making the interface look funky. If this happens when the browser is resized, you may be able to improve the appearance by adjusting the responsive breakpoint to change the size at which it changes to the accordion view — see instructions in the documentation for this.

Oh I am actually referring to the content section of the tab, not to the title section. Like if you have a very long word within the tab content, the line will not break until it reach the space after that word, so the word will be overlapping and going out of the right border of the tab.

This will occur with any div where there’s a long line of text with no spaces.

There are a few possible CSS workarounds, the simplest is probably to add the following rules – follow the directions in the plugin documentation for the recommended way to use custom CSS with the plugin:

.responsive-tabs .responsive-tabs__panel {
	overflow: scroll;
	word-wrap: break-word;
}

There are various other approaches to deal with this at: https://stackoverflow.com/questions/320184/how-to-prevent-long-words-from-breaking-my-div

I wouldn’t consider this a bug as it is normal browser behaviour, however I will put the the word-wrap: break-word; rule on the list of changes to consider for the next version of the plugin.

It makes perfect sense, thanks for the information. I was able to solve the problem with the solution you provide.

.responsive-tabs .responsive-tabs__panel {
word-wrap: break-word;
}

Thanks again…