Patch - Core - Fix word-break issue in the main section for long word…

…s on small screens (#2450)
wet-boew · Jan 15, 2025 · 7d6fd80 · 7d6fd80
1 parent a92f804
commit 7d6fd80
Show file tree

Hide file tree

Showing 3 changed files with 6 additions and 2 deletions.
diff --git a/sites/baseline/_scaffolding.scss b/sites/baseline/_scaffolding.scss
@@ -20,6 +20,10 @@ html {
 main {
 	font-size: 20px;
 	line-height: 1.65em;
+
+	* {
+		word-break: break-word;
+	}
 }
 
 //

diff --git a/templates/content-page/content-en.md b/templates/content-page/content-en.md
@@ -14,7 +14,7 @@ share: true
 <p>Add the CSS class name <code>.cnt-wdth-lmtd</code> to a sectioning element <code>&lt;section class="cnt-wdth-lmtd"&gt;...&lt;section&gt;</code> inside the main content of your page. More guidance are provided in the Content and IA specification.</p>
 <section class="cnt-wdth-lmtd">
 	<h3>Section example with limited width content</h3>
-	<p>Different example text. Different example text. Different example text. Different example text. Different example text. Different example text. Different example text. Different example text.</p>
+	<p>Different example text. Different example text. Different example text. Different example text. Different example text. Different example text. Different example text. Different example text. This is a very long word pneumonoultramicroscopicsilicovolcanoconiosis.</p>
 </section>
 <h2 id="call-to-action">Call to action button</h2>
 <p>Add the CSS class name <code>.btn-call-to-action</code> to a your button or link that define the main call for action for a page. For example the initiation button/link in a service initiation pages. More guidance are provided in the Content and IA specification.</p>

diff --git a/templates/content-page/content-fr.md b/templates/content-page/content-fr.md
@@ -13,7 +13,7 @@ share: true
 <p>Ajouter la classe CSS <code>.cnt-wdth-lmtd</code> à l'élément de section <code>&lt;section class="cnt-wdth-lmtd"&gt;...&lt;section&gt;</code> à l'intérieur du contenu principal de votre page. De plus amples renseignements sont disponibles dans la spécification du contenu et de l'architecture de l'information pour Canada.ca.</p>
 <section class="cnt-wdth-lmtd">
 	<h3>Exemple de section avec une largeur de contenu limitée</h3>
-	<p>Exemple de texte différent. Exemple de texte différent. Exemple de texte différent. Exemple de texte différent. Exemple de texte différent. Exemple de texte différent. Exemple de texte différent. Exemple de texte différent.</p>
+	<p>Exemple de texte différent. Exemple de texte différent. Exemple de texte différent. Exemple de texte différent. Exemple de texte différent. Exemple de texte différent. Exemple de texte différent. Exemple de texte différent. Ceci est un très long mot intergouvernementalisationsintergouvernementalisations.</p>
 </section>
 <h2 id="call-to-action">Bouton d'appel à l'action</h2>
 <p>Ajouter la classe CSS <code>.btn-call-to-action</code> à votre bouton ou lien qui definie l'appel à l'action principal de la page. Par example le bouton ou le lien de lancement d'une page de lancements d'un service. De plus amples renseignements sont disponibles dans la spécification du contenu et de l'architecture de l'information pour Canada.ca.</p>
-Original file line number
+Diff line change
@@ Expand Up / @@ -20,6 +20,10 @@ html { @@
     main {
     	font-size: 20px;
     	line-height: 1.65em;
+    	* {
+    		word-break: break-word;
+    	}
     }
     //
@@ Expand Down @@