[Tabs] Label overflow hides the text content if it gets too small

[rhino5oh]

Bug, feature request, or proposal:

Bug. If you have an md-tab, with a label that contains a space, the wording after the space is no longer visible if the browser window size is reduced. For example, if your label says "Medical History", it displays fine when the browser window is large. However, if you make the browser window small enough, the second word is cut off and all you see if "Medical" in the tab. See attached screenshot.

What is the expected behavior?

The tab should still show the full text OR resize/wrap/truncate the text with ellipsis, even if the browser window is resized. It should not completely cut off what should be there without any indication that there is more information in the label

What is the current behavior?

The tab label gets cut off

What are the steps to reproduce?

create and md-tab with a multi-word label (with a space in between the words), and shrink your browser window down

Providing a Plunker (or similar) is the best way to get the team to see your issue.
Plunker template: https://goo.gl/DlHd6U

What is the use-case or motivation for changing an existing behavior?

its a bad user experience the way it currently is

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

Discoved while using Angular 4.1.2 and Material 2.0.0-beta.7

Is there anything else we should know?

negatory

[julianobrasil]

Yeah... but according to Material Design specs, there's a limit to show the full text. Also all the visible tabs should have the same width. In this case, it seems it should have broken the line and decreased the font size.

[rhino5oh]

I agree @julianobrasil, thanks for your response. That seems like a perfectly acceptable way to handle text over the limit. Either way, it should never completely cut off what should be there without any indication that there is more information in the label

[soarfalc]

is possible to fix this problem ? :)