[Bug Report] Word Wrapping in Card Title breaks words before wrapping the line.

[MatthewAry]

Environment

Vuetify Version: 2.0.19
Vue Version: 2.6.10
Browsers: Chrome 77.0.3865.90
OS: Mac OS 10.14.6

Steps to reproduce

Create a card and restrict it's width. Put in a long string into the title component of the card. Observe how the words are broken instead of the line.

Expected Behavior

When the card title component is too narrow to contain it's text, it should line wrap first, then word break if a word is on its own line and is going to overflow.

Actual Behavior

The card title breaks the word before it wraps the line.

Reproduction Link

https://codepen.io/MatthewAry/pen/WNeWmPp

Other comments

A solution is provided in the codepen in the form of a css class.

Also see: https://drafts.csswg.org/css-text-3/#word-break-property and note that this solution might not be appropriate for some languages.

[dnl13]

Yes, think it is a bug as well.
I can't imagine that word-break: break-all; is intendet.

affected Components: v-card-text | v-card-title | v-card
affected Class: v-card__text | v-card__title | v-card

.v-card__text is receiving this value from .v-card but .v-card__title got this value on its own

temporary solution:

/* your css */

.v-card__text, .v-card__title {
  word-break: normal; /* maybe !important  */
}

[johnleider]

It was intended, introduced here 81af19d

Any feedback is appreciated, it was the best option for all browsers. There were a few better options but they were trashed on IE11.

[MatthewAry]

Was IE11 the only browser holding back a better solution?

[BotellaA]

I understand the goal to be compliant with all browers. However, it is now quite hugly and hard to read by default.

Maybe a new VCard prop could ease this configuration.

[lucien-stavenhagen]

I agree, this is highly reprehensible behavior, so in my view this is probably not a good tradeoff for IE 11 support. I agree with the idea of a special prop also.

[mrodal]

I also agree that this is an ugly default option.. the css workaround should be for those having problems on ie11

[dnl13]

I am not shure how sass/scss and/or building tools are able to handle CSS-Hacks but maybe we can separate this "special problem" via CSS-Hack? indeed it will not be the best solution.

eg:
IE11 only
_:-ms-fullscreen, :root .selector { property: value; }

or IE 9-11
_::selection, .selector { property: value\0; }

IE11 only SCSS

/*--- Only IE ≤ 11 ---*/
@mixin only_ie11($selector, $map){
	@media all and (-ms-high-contrast:none){
		*::-ms-backdrop, #{$selector} {
			@each $property, $value in ($map) {
				#{$property}: $value+\0;
			}
		}
	}
}

this one taken from: saadeghi/browser-hack-sass-mixins

[mrodal]

Looking at the roadmap, the 2.3 release with preconfigurable components seems like a good place to add a parameter for this issue

[MatthewAry]

It's also worth noting that Microsoft won't be installing IE by default on Windows anymore.

[ErnieAyon]

Thanks for the comments, I thought I was missing something with all my card-titles breaking mid-word. It makes my app look ugly and hard to read. I also vote against the word break by default.

[alatella87]

@dnl13 thanks a bunch.

[Jonskadev]

Agree with using a prop in v-card to change the word-breaking property, specially because IE is less and less used every day that passes.
I'll stick with the raw css solution for now though, not like I have any other option.

[MatthewAry]

I think that modern browsers should be supported first and foremost before we try to make special accomodations for IE. There are plenty of ways for doing CSS that is exclusive to IE and CSS that is ignored by IE. This word break behavior is glaring. Its distracting for users. Users who encounter it have to make extra effort to understand the contents of the card title by putting the fragmented words together. This does not make a pleasing experience. Some people, users, can get very worked up over stuff like this.

So if support for IE is a serious concern, then there are harder but better paths to solving this. Personally, I think that browsers should use their default text wrapping behavior for something like this.

[tenzint]

Yes, think it is a bug as well.
I can't imagine that word-break: break-all; is intendet.

affected Components: v-card-text | v-card-title | v-card
affected Class: v-card__text | v-card__title | v-card

.v-card__text is receiving this value from .v-card but .v-card__title got this value on its own

temporary solution:

/* your css */

.v-card__text, .v-card__title {
  word-break: normal; /* maybe !important  */
}

Thanks, you're a time saver 👍 :)

[OBrown92]

The workaround from @dnl13 is working fine for me.

[johnleider]

fixed in c44edc1

If you have any questions, please reach out to us in our Discord community.

[YannikWeissenfels]

Yes, think it is a bug as well. I can't imagine that word-break: break-all; is intendet.

affected Components: v-card-text | v-card-title | v-card affected Class: v-card__text | v-card__title | v-card

.v-card__text is receiving this value from .v-card but .v-card__title got this value on its own

temporary solution:

/* your css */

.v-card__text, .v-card__title {
  word-break: normal; /* maybe !important  */
}

I'm using Vue 3 and classes changed. This worked for me:

.v-card-text, .v-card-title {
white-space: normal; /* maybe !important */
}

[MartinX3]

Currently the best solution for vuetify 2.6

[class*='text'] {
    white-space: normal;
}

.v-card__title {
    word-break: normal;
}

[egorvdovenko]

Actually, there is an appropriate variable:
https://v2.vuetifyjs.com/en/api/v-card/#sass-card-title-word-break