[28373] Add `-no-ellipsis` to disable default overflow

https://community.openproject.com/wp/28373

[ci skip]

app/assets/stylesheets/content/_table.lsg

@@ -107,6 +107,89 @@
 
 ```
 
+## Text overflow / ellipse styles
+
+Use `-no-ellipse` class to a TD element to disable the text-overflow applied usually.
+
+```
+<div class="generic-table--container">
+  <div class="generic-table--results-container" style="max-height: 340px;">
+    <table class="generic-table" interactive-table>
+      <colgroup>
+        <col highlight-col>
+        <col highlight-col>
+        <col highlight-col>
+        <col highlight-col>
+        <col highlight-col>
+      </colgroup>
+      <thead>
+        <tr>
+          <th>
+            <div class="generic-table--sort-header-outer">
+              <div class="generic-table--sort-header">
+                <span class="sort asc">
+                  Content wraps in new lines
+                </span>
+              </div>
+            </div>
+          </th>
+          <th>
+            <div class="generic-table--sort-header-outer">
+              <div class="generic-table--sort-header">
+                <span class="sort asc">
+                clipped
+                </span>
+              </div>
+            </div>
+          </th>
+          <th>
+            <div class="generic-table--sort-header-outer">
+              <div class="generic-table--sort-header">
+                <span class="sort desc">
+                  Third
+                </span>
+              </div>
+            </div>
+          </th>
+          <th>
+            <div class="generic-table--sort-header-outer">
+              <div class="generic-table--sort-header">
+                <span class="sort desc">
+                  Fourth
+                </span>
+              </div>
+            </div>
+          </th>
+          <th>
+            <div class="generic-table--sort-header-outer">
+              <div class="generic-table--sort-header">
+                <span class="sort desc">
+                  Fifth
+                </span>
+              </div>
+            </div>
+          </th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr>
+          <td class="-no-ellipsis">
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus porta lorem congue lacus euismod egestas. Mauris odio orci, semper sed molestie viverra, vestibulum et nisi.
+          </td>
+          <td>Nullam a sem et metus congue placerat. Text will overflow once max-width is exceeded</td>
+          <td>Mauris ut augue viverra, consequat eros eu, maximus quam.</td>
+          <td>Maecenas elementum orci a varius suscipit.</td>
+          <td>Nunc molestie neque sit amet eros semper dapibus.</td>
+        </tr>
+      </tbody>
+    </table>
+
+  </div>
+</div>
+
+```
+
+
 ## with footer
 
 ```

app/assets/stylesheets/content/_table.sass

@@ -137,8 +137,10 @@ table.generic-table
     tr:not(.-no-highlighting)
       border-bottom: 1px solid $table-row-border-color
 
-    td
+    td:not(.-no-ellipsis)
       @include text-shortener
+
+    td
       max-width: 300px
       text-align: left
       line-height: 1.6

app/views/boards/index.html.erb

@@ -80,7 +80,7 @@ See docs/COPYRIGHT.rdoc for more details.
       <tbody>
         <% for board in @boards %>
           <tr>
-            <td>
+            <td class="-no-ellipsis">
               <%= link_to h(board.name), { action: 'show', id: board }, class: "board"  %><br />
               <%=h board.description %>
             </td>