Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Table block: Removes the `word-break:break-all;` from the table cells #16741

Merged
merged 4 commits into from Aug 6, 2019
Merged
Changes from all commits
Commits
File filter...
Filter file types
Jump to…
Jump to file or symbol
Failed to load files and symbols.

Always

Just for now

@@ -9,9 +9,10 @@
// Ensure the table element is not full-width when aligned.
width: auto;
}

td,
th {
word-break: break-all;
word-break: break-word;
}
}

@@ -17,7 +17,7 @@

td,
th {
word-break: break-all;
word-break: break-word;
}
}

@@ -34,8 +34,7 @@

td,
th {
// Aligned tables shouldn't scroll horizontally so we need their contents to wrap.

This comment has been minimized.

Copy link
@mapk

mapk Jul 24, 2019

Author Contributor

While I did some alignment testing as can be seen in the gif, I'm a little curious about this comment. Do the contents need to wrap by break-all? Or can they just wrap naturally? I'm hoping my removal of this doesn't resurface an issue I'm unaware of. @jasmussen @talldan any thoughts?

This comment has been minimized.

Copy link
@mapk

mapk Jul 25, 2019

Author Contributor

Changing this to overflow-wrap seems to be the better solution.

This comment has been minimized.

Copy link
@talldan

talldan Jul 25, 2019

Contributor

I think there's an issue with overflow-wrap. If you type in some text with no spaces along and use a block alignment, the table goes off the screen:
Screen Shot 2019-07-25 at 11 41 17 am

I think the key behaviour is that when an alignment is used the table should only ever take up a portion of the page, it should never expand to full width and beyond. word-break: break-word; might be the best compromise. That still seems to wrap long words, but prefers breaking at word boundaries where possible.

This comment has been minimized.

Copy link
@mapk

mapk Jul 25, 2019

Author Contributor

Thanks for that catch, @talldan! Using word-break: break-all was just so difficult for me b/c it broke a LOT of words, at least in Firefox. If it's not complicated, what if we used overflow-wrap for the default aligned Table block, and overwrite that with break-word for any Table block that uses alignments?

This comment has been minimized.

Copy link
@talldan

talldan Jul 26, 2019

Contributor

👍 Yep, great idea.

This comment has been minimized.

Copy link
@brentswisher

brentswisher Jul 29, 2019

Contributor

@mapk I think what you want to do here is update the current word-break: break-all to word-break: break-word instead of replacing with overflow-wrap. That should accomplish what you want without causing issues with long words not wrapping.

I see @talldan mentioned that above, but I know from working with this in the past it's easy to miss that distinction while reading things so thought I might point it out.

word-break: break-all;
word-break: break-word;
}
}

ProTip! Use n and p to navigate between commits in a pull request.
You can’t perform that action at this time.