如何修复表格中的 CSS“空白：nowrap”？ [复制]答案

【问题标题】：How to fix CSS "White-space: nowrap" in a table? [duplicate]如何修复表格中的 CSS“空白：nowrap”？ [复制]
【发布时间】：2019-04-22 00:57:53
【问题描述】：

如果描述对于该列来说太长，我想显示一个文本溢出：省略号。但是，我不确定为什么我的代码不起作用。我加了！如果有一些内部 CSS 文件可能覆盖了我的 CSS 内容，这很重要。现在，文字全部添加到描述中的一行代码并扩展了400px的宽度。 [![描述列][1]][1]

 <div class="table-responsive">
    <table class="table table-bordered" id="myTable" style="background-color:aqua">
        <thead>
            <tr style=" font-size: 18px;">
                <th style="background-color:cadetblue; width:150px;">
                    @Html.DisplayNameFor(model => model.WorkOrderNumber)
               </th>
            </tr>
        </thead>
        <tbody>

            @foreach (var item in Model)
            {
                    //THIS LINE IS NOT WORKING
                    <td style="background-color:blueviolet;  width:400px;  white-space: nowrap !important;  overflow: hidden !important; text-overflow: ellipsis !important;  ">
                        @Html.DisplayFor(modelItem => item.Description)
                    </td>

etc....

【问题讨论】：

标签： html css asp.net-core datatables

【解决方案1】：

你需要将你的文本包裹在div 中的td 标签中并应用到css下面

th>.truncate, td>.truncate{
  width: auto;
  min-width: 0;
  max-width: 200px;
  display: inline-block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

你可以随意改变宽度

table, td, th {  
  border: 1px solid #ddd;
  text-align: left;
}

table {
  border-collapse: collapse;
  width: 100%;
}

th, td {
  padding: 15px;
}

th>.truncate, td>.truncate{
  width: auto;
  min-width: 0;
  max-width: 200px;
  display: inline-block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

<table>
  <tr>
    <th><div class="truncate">Name</div></th>
    <th><div class="truncate">Address</div></th>
    <th><div class="truncate">Fees</div></th>
  </tr>
  <tr>
    <td><div class="truncate">ipsum or lipsum as it is sometimes known, is dummy text used in laying out print, graphic</div></td>
    <td>
    	<div class="truncate">
    		Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic
    	</div>
    </td>
    <td><div>$100</div></td>
  </tr>
  <tr>
    <td><div class="truncate">Lois</div></td>
    <td>
    	<div class="truncate">
    		dummy text used in laying out print, graphic
    	</div>
    </td>
    <td><div>$150</div></td>
  </tr>
  <tr>
    <td><div class="truncate">Joe</div></td>
    <td>
    	<div class="truncate">
    		lipsum as it is sometimes known, is dummy text used in laying out print, graphic
    	</div>
    </td>
    <td><div>$300</div></td>
  </tr>
</table>

【讨论】：