Question

我想显示一个文本溢出：如果该列的说明过长，则省略号。但是，我不确定为什么我的代码无法正常工作。我加了！如果有一些内部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....

Answer 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>

如何在表中修复CSS“空白：nowrap”？

1 个答案: