title: How to fix CSS "White-space: nowrap" in a table?
body: <p>I would like to show a text-overflow: ellipsis if the description is too long for the column. However, I'm not sure why my code isn't working. I added the! important in case if there were some internal CSS files that might have been overriding my CSS stuff. Right now, the text is all added to one line of code in the description and extending the width of 400px. [![Description Col][1]][1]</p>
  
  <pre><code> &lt;div class="table-responsive"&gt;
      &lt;table class="table table-bordered" id="myTable" style="background-color:aqua"&gt;
          &lt;thead&gt;
              &lt;tr style=" font-size: 18px;"&gt;
                  &lt;th style="background-color:cadetblue; width:150px;"&gt;
                      @Html.DisplayNameFor(model =&gt; model.WorkOrderNumber)
                 &lt;/th&gt;
              &lt;/tr&gt;
          &lt;/thead&gt;
          &lt;tbody&gt;
  
              @foreach (var item in Model)
              {
                      //THIS LINE IS NOT WORKING
                      &lt;td style="background-color:blueviolet;  width:400px;  white-space: nowrap !important;  overflow: hidden !important; text-overflow: ellipsis !important;  "&gt;
                          @Html.DisplayFor(modelItem =&gt; item.Description)
                      &lt;/td&gt;
  
  etc....
  </code></pre>