how to fix bad word breaks in JIRA?

[Joe Harris]

I'm working in JIRA.  I'm writing paragraphs.  For words at the end far right of the line, JIRA arbitrarily breaks the word into nonsense "syllables" that are very confusing to look at.   For example, it might break "the" into "th" plus "e."   Other than switching to "old view" (which does not arbitrarily break words), how to fix?  Is there a setting somewhere?

[Erik McEwen]

Has anyone discovered a fix for this? Mine only happens when I type in the 'Description" box. The first letter become the last.

[Joe Harris]

I was able to fix the problem by changing the renderer to "Wiki style."  (Also, one workaround is to use "Old View," but that option won't exist forever.)

[Joe Harris]

I think I'm onto something.  I was wrong before when I said that the problem happens in every field.  Actually, the problem only happens in the field "User Story." 

What is different about that field?  In my JIRA, that field is the only one without editing tools (the toolbar that sits at the top of the field).  

Who defines which fields receive editing tools?  Atlassian?  My local JIRA admin?

[Nic Brough -Adaptavist-]

Ah, that's interesting.

Two things to check:

1) What type of field is it?   I mean the exact type the admin UI shows, not just that it looks like a plain text.

2)  Go to the project's "field configuration" and check what "renderer" the field has (if any)

[Nic Brough -Adaptavist-]

Hmm.  Am I right in thinking this looks like you are hitting return in the middle of the word?  (I'm not saying you are, just that is what the problem looks like)

What happens when you shrink the browser window so that the field starts to compress, which would shift the soft line breaks around?  Do words jump down as the field narrow down, or does the break in the word move to the next word?

Also, have you tried a different browser, and what fields does this happen in?  (Comment, Description, Environment - all the long text fields for example, or is it limited to just one)

I can't replicate this problem 

[Joe Harris]

Yes, it looks like I am arbitrarily hitting return in the middle of the word.  But I am not doing that.  JIRA is breaking up the word.

Like I say, the problem does not happen in "old view."  This makes me think that me problem is with the "new view."

If I shrink the browser window down, I get the same wonky behavior--just with different words.

The problem happens in all the fields (Description, User Story, etc.).

I only have one browser, so I can't test other browsers.  :(

[Nic Brough -Adaptavist-]

Ok, the fact the space moves through the middle of the words on resizing tells us that there is something wrong with your browser.

It is possible to cause CSS to do this, but neither the old nor new views do it.  (Open the page where it is happening, and select "view source" - it's a wall of text, but it does not contain any of the directives that you'd have to set to cause this to happen - look for min-content and overflow-wrap)

So, I'm afraid your browser is injecting something, or has a word-wrap function that's set poorly.

[Joe Harris]

The problem doesn't happen in JIRA's "Old View." If I switch to "Old View," then everything is fine.

The problem doesn't happen with any other website--only with the "new view" for JIRA.  Since I only encounter the problem with the "new view" for JIRA, I assume that the problem is due to the "new view" for JIRA.

[Nic Brough -Adaptavist-]

It's definitely something in the new view that is triggering it, but that doesn't necessarily mean incorrect code in Jira. 

I can't replicate the problem in any of the main browsers I use, even when using them with piles of extensions, and the code you get back from Jira for your browser to render is not set up to allow this (the data you are getting from Jira to tell the browser how to draw it breaks on words, not letters).  

I'm afraid all we can tell you is that there's something broken in your browser - either the browser or one of its extensions.  The way to prove that is to try another browser (either the same machine or a different one, but ideally the same machine)

[Joe Harris]

I can confirm that the behavior happens with both Chrome and Firefox.  Also, for both browsers, the behavior only happens in "new view."  "Old view" is fine.  

Same behavior happens with both Mac and PC.

I have co-workers who confirm the behavior.

[Nic Brough -Adaptavist-]

Ok, so how are your company using Cloud differently to the rest of the world?

[Joe Harris]

Yes, that is the question.  Do you have any ideas? 

I've looked around at various settings, but I can't find anything.

[Nic Brough -Adaptavist-]

I'm completely stuck, without being able to replicate it.

[Michael Merrifield]

"Rest of the world"?? This happens in our Jira Cloud projects (Jira and JSM) as well.

Happens on Windows and Linux.

Happens using Chrome, Firefox (and Edge).

It does not happen for all multi-line text fields...

It does not seem to matter whether the filed uses "Wiki Style Renderer" or "Default Text Renderer".

It does seem to matter that the field type is "Text Field (multi-line)" because it does not happen for all fields of this type.

[Nic Brough -Adaptavist-]

Rest of the world can't replicate it, so we need to know what you are doing in order to get it.  What are you doing differently to the rest of us?

[Jordan Paul]

 @Nic Brough -Adaptavist- 

We're seeing the same issue. On our Jira cloud instance, multi-line fields using the "default text renderer" behave according to the CSS "word-break: break-all". In fact, when I inspect the page elements, I can see that this is the exact style which is to blame 

._1o4r9jpi div[data-read-view-fit-container-width] {
    word-break: break-all;
}

On the actual renderer element, I see

<div data-read-view-fit-container-width="true" class="css-1dtwgr">
  <div class="_18u0i2wt">
    <div class="_1wyb1x4e _vwz478tn _k48p4jg8 _19pk5ij9 _otyridpf _1dyzdjp5 _18m91wug _1reo15vq _1bsb1osq _4t3i1wug _o5726vc6">
      My really long content that will wrap in ways that I do not like
    </div>
  </div>
</div>

So, there's something causing the data-read-view-fit-container-width="true" to be there which is triggering this word-break: break-all; style.

Any ideas?

[Nic Brough -Adaptavist-]

I'm completely stuck on how to replicate this on Cloud (I've seen a similar behaviour once with a "force a dark theme" extension for Chrome, but I wasn't looking at Jira). 

Inspecting the code in my Cloud system gives me similar CSS, but not what you are getting.

._19pk1lyp div[data-read-view-fit-container-width] {
    word-break: break-word;
}

Just to be sure, I may be looking at a different view to the one(s) you're getting the problem in - is yours occurring in the main issue view?

[Jordan Paul]

Yup, the main issue view at:

https://mydomain.atlassian.net/jira/browse/ABC-123

Has your instance rolled over to the recent update where they’ve removed the option to switch back into the “old issue view”? I wonder if this is just a recent regression…

But other than that, yea - no clue. Bizarre. 

Here are some screenshots of what we see

Desktop

Mobile

[Nic Brough -Adaptavist-]

Yes, both systems I use reguarly have been flipped over.  Can't replicate it in either (in either browser I use)

[Joe Harris]