Use pre-wrap instead of pre-line.

static/elements/chromedash-feature.js

@@ -296,13 +296,13 @@ class ChromedashFeature extends LitElement {
              html`<p><b>This feature is only shown in the feature list
                         to users with edit access.</b></p>
              `: nothing }
-          <p class="${this.open ? 'pre-line' : ''}">
+          <p class="${this.open ? 'preformatted' : ''}">
             <span>${autolink(this.feature.summary)}</span>
           </p>
         </summary>
         ${this.feature.motivation ?
           html`<p><h3>Motivation</h3></p>
-        <p class="${this.open ? 'pre-line' : ''}">
+        <p class="${this.open ? 'preformatted' : ''}">
           <span>${autolink(this.feature.motivation)}</span>
         </p>`
           : nothing }

static/sass/shared.scss

@@ -89,6 +89,6 @@ iron-icon {
   width: var(--icon-size);
 }
 
-.pre-line {
+.preformatted {
-  white-space: pre-line;
+  white-space: pre-wrap;
 }

templates/blink/intent_to_implement.html

@@ -40,7 +40,7 @@
   {% endif %}
 
   <br><br><h4>Summary</h4>
-  <p class="pre-line">{{ feature.summary | urlize }}</p>
+  <p class="preformatted">{{ feature.summary | urlize }}</p>
 
   <br><br><h4>Blink component</h4>
   {% for c in feature.blink_components %}
@@ -49,7 +49,7 @@
 
   {% if 'motivation' in sections_to_show %}
     <br><br><h4>Motivation</h4>
-    <p class="pre-line">{{feature.motivation|urlize}}</p>
+    <p class="preformatted">{{feature.motivation|urlize}}</p>
 
     <br><br><h4>Initial public proposal</h4>
     {{feature.initial_public_proposal_url|urlize}}
@@ -79,7 +79,7 @@
   <br><br><h4>Risks</h4>
   <div style="margin-left: 4em;">
     <br><br><h4>Interoperability and Compatibility</h4>
-    <p class="pre-line">{{feature.interop_compat_risks|urlize}}</p>
+    <p class="preformatted">{{feature.interop_compat_risks|urlize}}</p>
 
     <br><br><i>Gecko</i>: {{feature.ff_views.text}}
     {% if feature.ff_views_link %}
@@ -107,17 +107,17 @@
 
     {% if feature.ergonomics_risks %}
       <br><br><h4>Ergonomics</h4>
-      <p class="pre-line">{{feature.ergonomics_risks|urlize}}</p>
+      <p class="preformatted">{{feature.ergonomics_risks|urlize}}</p>
     {% endif %}
 
     {% if feature.activation_risks %}
       <br><br><h4>Activation</h4>
-      <p class="pre-line">{{feature.activation_risks|urlize}}</p>
+      <p class="preformatted">{{feature.activation_risks|urlize}}</p>
     {% endif %}
 
     {% if feature.security_risks %}
       <br><br><h4>Security</h4>
-      <p class="pre-line">{{feature.security_risks|urlize}}</p>
+      <p class="preformatted">{{feature.security_risks|urlize}}</p>
     {% endif %}
 
   </div> <!-- end risks -->
@@ -125,37 +125,37 @@
 {% if 'experiment' in sections_to_show %}
 
   <br><br><h4>Goals for experimentation</h4>
-  <p class="pre-line">{{feature.experiment_goals|urlize}}</p>
+  <p class="preformatted">{{feature.experiment_goals|urlize}}</p>
 
   {% if feature.experiment_timeline %}
     <br><br><h4>Experimental timeline</h4>
-    <p class="pre-line">{{feature.experiment_timeline|urlize}}</p>
+    <p class="preformatted">{{feature.experiment_timeline|urlize}}</p>
   {% endif %}
 
   {% if 'extension_reason' in sections_to_show %}
     <br><br><h4>Reason this experiment is being extended</h4>
-    <p class="pre-line">{{feature.experiment_extension_reason|urlize}}</p>
+    <p class="preformatted">{{feature.experiment_extension_reason|urlize}}</p>
   {% endif %}
 
   <br><br><h4>Ongoing technical constraints</h4>
-  <p class="pre-line">{{feature.ongoing_constraints|urlize}}</p>
+  <p class="preformatted">{{feature.ongoing_constraints|urlize}}</p>
 
 {% endif %}
 
 {% if feature.debuggability %}
   <br><br><h4>Debuggability</h4>
-  <p class="pre-line">{{feature.debuggability|urlize}}</p>
+  <p class="preformatted">{{feature.debuggability|urlize}}</p>
 {% endif %}
 
 <br><br><h4>Will this feature be supported on all six Blink platforms
     (Windows, Mac, Linux, Chrome OS, Android, and Android WebView)?</h4>
 {% if feature.all_platforms %}Yes{% else %}No{% endif %}
-<p class="pre-line">{{feature.all_platforms_descr|urlize}}</p>
+<p class="preformatted">{{feature.all_platforms_descr|urlize}}</p>
 
 <br><br><h4>Is this feature fully tested by <a href="https://chromium.googlesource.com/chromium/src/+/master/docs/testing/web_platform_tests.md">web-platform-tests</a>?</h4>
 {% if feature.wpt %}Yes{% else %}No{% endif %}
 {% if feature.wpt_desc %}
-  <p class="pre-line">{{feature.wpt_descr|urlize}}</p>
+  <p class="preformatted">{{feature.wpt_descr|urlize}}</p>
 {% endif %}
 
 {% if feature.bug_url %}

templates/feature.html

@@ -85,14 +85,14 @@
 
     {% if feature.summary %}
     <section id="summary">
-      <p class="pre-line">{{ feature.summary|urlize }}</p>
+      <p class="preformatted">{{ feature.summary|urlize }}</p>
     </section>
     {% endif %}
 
     {% if feature.motivation %}
     <section id="motivation">
       <h3>Motivation</h3>
-      <p class="pre-line">{{ feature.motivation|urlize }}</p>
+      <p class="preformatted">{{ feature.motivation|urlize }}</p>
     </section>
     {% endif %}
 
@@ -225,7 +225,7 @@
     {% if feature.comments %}
     <section id="comments">
       <h3>Comments</h3>
-      <p class="pre-line">{{ feature.comments|urlize }}</p>
+      <p class="preformatted">{{ feature.comments|urlize }}</p>
     </section>
     {% endif %}