[#8312] - fixes layout long titles + text in protostar
- Fixed in Code Base
- 7 May 2016
- Medium
- Build: staging
- Easy Test
- # 8312
- Diff
- pe7er:protostar-title-wordwrap
- Success continuous-integration/travis-ci/pr The Travis CI build passed Details
- Pending JTracker/HumanTestResults Human Test Results: 3 Successful 1 Failed. Details
User tests: Successful: Unsuccessful:
This PR fixes the layout of long article titles & text articles in the Protostar template. If an article or text has content without spaces or a hyphen - it will continue on the same line, messing up the layout.
btw: I was not intending to use such long titles myself but I can imagine issues with words/sentences in the Thai & Welsh languages.
Testing Procedure
Before the PR
Create a new article
Content > Article > [New]
Use a very long title + article text that has no spaces or hyphens -
Back-end with Isis template looks ok
In the list of Articles the Isis administrator template will nicely break the title onto multiple lines.
Front-end with Protostar template looks weird
However the front-end view of the Protostar template does not break the title and text, and those both mess up the layout.
After the PR
I've added word-wrap: break-word; to h1, h2, h3, h4, h5, h6 and p so that the layout looks better. I've added it to templates/protostar/less/template.less and manually to templates/protostar/css/template.css (however it should be done with compiling instead)
| Status | New | ⇒ | Pending |
joomla-cms-bot
- | Labels |
Added:
?
|
||
zero-24
- | Category | ⇒ | Templates (site) |
| Easy | No | ⇒ | Yes |
I have tested this item 
successfully on a53ea69
Tested this by creating a new article with a very long title and a very long text. Before the patch they were not wrapped and running off my screen. After applying the patch, the text and title were nicely wrapped.
This comment was created with the J!Tracker Application at issues.joomla.org/joomla-cms/8312.
@infograf768 I "think" that @bakual gave you bad advice but it was based on your incorrect code
You have
word-break: break-all;
word-wrap: break-word;
Which had the unwanted side effect that was in your PR
This PR just has
word-wrap: break-word;
But I could be talking rubbish
In JMs PR it was pointed out that the title now breaks within a word when it's a title with several words. Which obviously is worse than breaking the line at spaces.
Also I questioned if there really are such ridiculous long titles in practice.
Both together and the fact that the PR dealt with two separate things I asked it to be removed.
I have tested this item 
unsuccessfully on a53ea69
@pe7er I made a new article and used a very long title + article text without spaces or hyphens. It was messing up the layout of the title an also the content of the article. After the PR the title was ok, but the text was not wrapped down an continued on the same line. Then i put in a "read more" , but the text after the "read more" also continued on the same line and did not fit the frame
This comment was created with the J!Tracker Application at issues.joomla.org/joomla-cms/8312.
There is indeed a difference between
.break-word {
word-break: break-all;
word-wrap: break-word;
}
which is used in back-end.
and using only
word-wrap: break-word;
as proposed in this patch, which respects spaces AND hyphens when present.
Otherwise, the title expands on one line only.
Basically, if we have no spaces OR hyphens in the title, word-break: break-all; will force cut when reaching the width of the container.
This is a screenshot of backend without word-break: break-all; when there are spaces OR hyphens in the title (see second article from top where we only have hyphens):
and now keeping word-break: break-all;
The best solution would evidently be:
-webkit-hyphens: auto;
-moz-hyphens: auto;
-ms-hyphens: auto;
-o-hyphens: auto;
hyphens: auto;
Alas, Chrome does not respect these...
Whatever is chosen, we should imho normalise between back-end and frontend.
I have tested this item successfully on a53ea69
Test OK
This comment was created with the J!Tracker Application at issues.joomla.org/joomla-cms/8312.
| Status | Pending | ⇒ | Needs Review |
Based on @bakual comments I am setting this to Needs Review for a maintainer to make a decision
This comment was created with the J!Tracker Application at issues.joomla.org/joomla-cms/8312.
I have tested this item successfully on a53ea69
This comment was created with the J!Tracker Application at issues.joomla.org/joomla-cms/8312.
wilsonge
- | Status | Needs Review | ⇒ | Fixed in Code Base |
| Closed_Date | 0000-00-00 00:00:00 | ⇒ | 2016-05-07 11:24:37 |
| Closed_By | ⇒ | wilsonge |
| Milestone |
Added: |
||
Sorry, thanks @zero-24 !