Words break unnecessarilly at end of line in forum topic replies

I suggest:
1) assign the issue to a different component a) Seven theme if it's on an admin page, Bartik theme if it's on an end-user page
2) give the URL/route at which this is happening and/or steps to reproduce
3) assign to 8.1.x dev if it still affects the latest 8.1 rc (tesingt on simplytest.me makes this easy to check)

Try to isolate the CSS rule that is causing the problem, use something like Chrome web inspector to toggle rules on/off until you isolate the culprit.

I think this may have been introduced in #1085472: Long strings within comments break Bartik's page layout.. If that is not true, it may help to do a git blame and track down the commit & issue that introduced the problem. The people involved in that will know why it was done and what the options are to fix it.

Currently working on a patch for this issue. Looks to be a small CSS error with the theme itself. Will be removing the line for word-break so it defaults to normal instead.

.comment__content {
word-break: break-all;
}

We retested this issue and it still exists on 8.2.x-dev
working with @sean.walker to create a patch for comment @ #11

Here is a patch for the suggestion on #11

Tagging. We could have better issue summary (so tagging again)

Is it possible to add screenshot after the patch was applied. After that, Needs issue summary update can be removed

Sending this for retesting

Attaching picture after removing the line of CSS from the stylesheet. It seems to fix the words breaking and also retains the ability for links to continue to break as well. This patch should be ready to go.

Removing 'Needs summary update', since issue summary looks good now.
Tempted to mark the issue RTBC, but CSS and the scope possible affected by the change are completely out of my scope

Thanks @ecrown and @valthebald for helping triage, and thanks @sean.walker@nreca.coop as well. Updating issue credit.

Thanks also @Q2U2 for the detailed original report.

I can confirm this is still an issue in the latest dev branch.

I can confirm the current patch in this issue breaks the "fix" for long strings implemented in #1085472: Long strings within comments break Bartik's page layout.. As such I am hiding the previous patch.

After hours of attempting to solve both issues in a single patch. I went with the solution in this article (https://css-tricks.com/snippets/css/prevent-long-urls-from-breaking-out-...) which unfortunately leaves the break-all in internet explorer. I would like to propose we open another separate issue for internet explorer as this patch fixes Chrome, Safari, Firefox, and IE for the long strings issue and fixes Chrome, Safari, and Firefox for the break-all issue. IE claims they support break-word but my testing would show otherwise.

It appears the problem with the long strings is specifically tied to displaying comments as table cells and potentially some width settings. I was able to get close by tweaking those settings but would ultimately need to open another issue as a feature request to add a better responsive design to comments. It doesn't look like comments were designed from a mobile first perspective which is definitely causing these bugs.

If anyone else agrees that open separate issues is a good idea. Then please feel free to open them and comment below.

I forgot to mention that I was aware that the elements.css in Bartik base sets break-word on the body and that it is actually inherited all the way down to the comments but Firefox needed it specifically defined in this class and Chrome needed "word-break: break-word" defined. So I added it to the comments class only. It isn't to say that we shouldn't consider adding the same lines here:

https://github.com/drupal/drupal/blob/8.1.x/core/themes/bartik/css/base/...

If we did move some of this code into the elements.css to apply to everything in the body we should exclude the break-all in internet explorer because "break-word" appears to work for non table-cells.

The tests showed failure for reasons unrelated to what was changed. I queued the patch for testing and it passed the second time around. This is ready for review.

i tried the patch #comment-11309415, now the word wrapping is working fine

before applying patch:

after applying patch:

Thanks @akhil.desai for testing, and thanks @ccjjmartin for the extensive work on the issue.

@webchick, @alexpott, @effulgentsia, @Cottser, @catch, and I agree that this is a normal-priority bug.

Since it is a CSS issue, assigning to Cottser for review. Thanks everyone!

@ccjjmartin indeed thanks for all the work on this - you mentioned you couldn't get it fully working in IE. Which version(s)? D8 browser requirements are here (IE9+): https://www.drupal.org/node/61509

I haven't tested the patch manually but just looking through some of the code so far:

1. +++ b/core/themes/bartik/css/components/comments.css
   @@ -64,7 +64,14 @@
   +  -ms-word-break: break-all;
   

   MDN says not to use this. Do we need it for any versions of IE that are supported for D8?

   https://developer.mozilla.org/en-US/docs/Web/CSS/word-break

2. +++ b/core/themes/bartik/css/components/comments.css
   @@ -64,7 +64,14 @@
   +  word-break: break-word;
   

   It seems like word-break: break-word is redundant since we already have word-wrap: break-word based on the note on http://caniuse.com/#search=word-break unless I'm totally misinterpreting that.

Response to #1 above:

I was testing Windows 7 and IE 11. Without -ms-word-break: break-all, the long strings ticket was not resolved. Added screenshots:

Although with it, we may fix the URLs and long words but we also have the disadvantage of every word breaking which might be worse than long words and links going off the page. See screenshot below:

This patch appears to work on all browsers. The -ms-word-break: break-all was removed and I applied word-break: break-all; to only hyperlinks within the comments. In order for the break-all to take effect, I had to display the links as inline-blocks. When I did that a strange border appeared at the bottom of links so I removed that.

In response to #2. I seem to remember having problems in firefox without that line but it appears to be working fine now without it. So I removed it in the patch below.

This should be good for review again. Removing my other patch from the display.

Here is what the latest patch looks like in Windows 7 and IE 11:

Bartik patches (please update this in the patches for Drupal 8)

I've been having to a patch Bartik since Drupal 8 was launched, yet this patch has never been updated to the patches. Why is this?
Is there any chance this could finally be put to rest? It so annoying having to do these manually (especially when they have been acknowledged and resolved) every time a new release comes out. Thank you for your help.

This is what I add to the comments.css

diff --git a/core/themes/bartik/css/components/comments.css b/core/themes/bartik/css/components/comments.css
index 30e1be8..03bbfd1 100644
--- a/core/themes/bartik/css/components/comments.css
+++ b/core/themes/bartik/css/components/comments.css
@@ -61,6 +61,7 @@

add below: here;
 
 
   border: 1px solid #d3d7d9;
   font-size: 0.929em;
   line-height: 1.6;
+  word-break: break-all;
 }
 
 .comment__content:before {

@paintingguy The patch from #36 needs careful cross browser testing by someone else in addition to its author. If you want the patch committed, you could do that testing then change the status to rtbc.

Thank you however, I'm happy to use this but unable to contribute in the solving as I am unqualified. I'm trying patch #36 as suggested and it seems to be doing what is needed.

Tagging with novice since this just needs some testing.

I'm now running this on my blog (http://www.garfieldtech.com/blog/drupal8-upgrade), and it solves the problem fine.

Good to read anther report of this! Please please.... Note: ... its not just happening in the forum, its all comments.
I've been trying/hoping to get comments breaking and a few other Bartik bugs patched for over a year now. I hate having to re-patch this every time a new version is updated.

Fwiw: The sidebar menu doesn't indent sub directories to the right either.

I wish these would be fixed.

Thanks for listening.

Please feel free to move this to the appropriate area.

Here is what I add to fix the menu in Bartik:

diff --git a/core/themes/bartik/css/components/menu.css b/core/themes/bartik/css/components/menu.css
index efde5d2..95420de 100644
--- a/core/themes/bartik/css/components/menu.css
+++ b/core/themes/bartik/css/components/menu.css
@@ -5,7 +5,7 @@

/* This is needed to override ul.menu styles in menu.theme.css */
ul.menu {
- margin: 0;
+ margin-left: 1em;
padding: 0 0 0.25em 0;
}

I've marked #2798459: CSS word-break property as a duplicate of this one.

+++ b/core/themes/bartik/css/components/comments.css
@@ -64,7 +64,18 @@
+  display: inline-block;
+  border: none;

Why are we adding this here and not just resetting everything that we've just set in the above CSS? Feels like we're doing more than just fixing the wrapping bug.

I created this issue to fix black text on a black background which is one of the main annoyances here:
https://www.drupal.org/node/2847886

Originally the second bit of code was to fix hyperlinks within comments. This still didn't fix the issue of very long words. Long words were still breaking the display. This is solved better with a max-width setting. 60% of the viewport width appears to be decent. Ultimately on mobile (a different ticket) a better approach would be to removing the nesting (indented) nature of comments.

Looks like the test is failing because of this:

(jQuery('#drupal-offcanvas').length > 0)

Which probably means that the viewport width adjustment of 60% isn't going to work because the comments sometimes scroll off the screen. This may need some algebra applied to figure out the proper width %.

This issues is also present in comments. I wish this could be resolved. It’s been 2 years.

I've picked this up at #uoecontributiondayaug2018.

I investigated the issue and it seems to work fine now on IE 11. I'm running Windows 10. The breaking of words with long URLs work fine on my machine. I can't report any issues on running the viewport with 60% adjustment and the comments don't scroll of the screen anymore.
You can have a look at the screenshot with which shows IE set to roughly 60%.
#uoecontributiondayaug2018.

I have picked this issue at DrupalConSeattle2019.

I have been investigating the issue and it seems to be working fine in Chrome, Firefox and Safari, I am currently working in MacOS.

However, I have noticed in the comments section when the username is small then the date below the username splits into multiple lines and look and feel gets disturbed for each comment.

I have now fixed this in the patch attached (bartik-word-breaks-2679126-67.patch).

Also I have attached before and after screenshots. Please review and see if this patch can be applied here.

Thanks,
Karthik

Patch to allow the comments in a Bartik theme to wrap and hyphenate has been created and is ready for review.

[deleted my comment]

Applies cleanly, small patch, code makes sense, RTBC.

+++ b/core/themes/bartik/css/components/comments.css
@@ -60,12 +60,17 @@
+.comment__content a{

Missing a space before the open bracket.

+++ b/core/themes/bartik/css/components/comments.css
@@ -60,12 +60,17 @@
+.comment__content a{

Extreme nit but this is missing a space before the opening brace. Are the screenshots in the issue summary still up-to-date with the latest patch?

I have applied the small fix that was found by @catch.

Hope this is alright.

Thank you!

Looks good. Thank you for your contribution, leolando.tan.

updating issue creds

Committed 81179a0 and pushed to 8.8.x. Thanks!

This is not eligble for back-port to 8.7.x because it makes css changes - see allowed changes

Darren Oh opened up #3085875: Backport fix for line break bug in comments to backport this because it's a bugfix rather than a visual change. Re-opening here for consideration.

Discussed with @catch - we're done with 8.7.x bugfixes - this is going in 8.8.0.

Good work. Thanks.