Create span class to avoid hard-coding CSS

_sass/main.scss

@@ -57,6 +57,10 @@ p, td {
   padding: 0 $padding-small 0 $padding-small;
 }
 
+span.nowrap {
+  white-space: nowrap;
+}
+
 .tooltip {
   display: none;
   position: absolute;
@@ -167,7 +171,7 @@ img.hundred {
   }
 }
 
-.odr-box { 
+.odr-box {
   img {
     float: right;
     padding-left: $padding-big;
@@ -195,7 +199,7 @@ img.hundred {
   height: $margin-std;
   overflow: hidden;
   border-radius: 50%;
-  margin: 0 auto; 
+  margin: 0 auto;
   img {
     width: 100%;
     height: 100%;

current-work.html

@@ -116,13 +116,13 @@ which LEAPS facilities are represented.
     <td>{% for pi in project.PI
       %}{% if forloop.first == false
       %}, {% endif
-      %}<span style="white-space: nowrap;">{{pi.name}}{% if pi.orcid %}<a target=”_blank” href="https://orcid.org/{{pi.orcid}}"><img style="padding-left: 0.2em; height: 1.8ex; width: auto; vertical-align: baseline"
+      %}<span class="nowrap">{{pi.name}}{% if pi.orcid %}<a target=”_blank” href="https://orcid.org/{{pi.orcid}}"><img style="padding-left: 0.2em; height: 1.8ex; width: auto; vertical-align: baseline"
         title='{{pi.orcid}}'
         src='{{ "assets/images/ORCID-iD.svg" | relative_url }}'/></a>{% endif %}</span>{% endfor %}
     </td>
     <td>{% for org in project.organisations
       %}{% if forloop.first %}<b>{%else%}, {% endif
-        %}<span style="white-space: nowrap;">{% if org.abbreviation
+        %}<span class="nowrap">{% if org.abbreviation
       %}<span class="tooltip-cont"
       ><span class="trigger-tooltip"
       >{{ org.abbreviation }}</span