add "effect based" word breaking css class

[refs #102]

AKPlan/templates/AKPlan/slots_table.html

@@ -4,9 +4,9 @@
 <table class="table table-striped">
     {% for akslot in slots %}
     <tr>
-        <td><b><a href="{% url 'submit:ak_detail' event_slug=event.slug pk=akslot.ak.pk %}">{{ akslot.ak.name }}</a></b></td>
+        <td class="breakWord"><b><a href="{% url 'submit:ak_detail' event_slug=event.slug pk=akslot.ak.pk %}">{{ akslot.ak.name }}</a></b></td>
         <td>{{ akslot.start | time:"H:i" }} - {{ akslot.end | time:"H:i" }}</td>
-        <td>{% if akslot.room and akslot.room.pk != '' %}
+        <td class="breakWord">{% if akslot.room and akslot.room.pk != '' %}
             <a href="{% url 'plan:plan_room' event_slug=event.slug pk=akslot.room.pk %}">{{ akslot.room }}</a>
         {% endif %}</td>
     </tr>

static_common/common/css/custom.css

@@ -26,3 +26,7 @@
     width: 150px;
 }
 
+.breakWord {
+    word-break: normal;
+    overflow-wrap: anywhere;
+}