Question

我的DOM结构类似于：

  <table>
   <tbody>
    <tr>
     <td>
      <div>
       <div>...some stuff</div>
       <div><em> some text in em</em></div>
      </div>
     </td>
     <td>
        ...a button that changes width
     </td>

问题在于，当按钮变宽时，左侧的td宽度会自动更改，并且em标签中的文本无法适应并包裹到第二行，从而弄乱了所有内容。

我想知道是否有一个CSS解决方案，以便当按钮变宽时，div和em可以自动变窄，溢出的文本变为省略号？

我是CSS的新手，并且DOM结构无法更改，因为它是由大型代码库中的模板生成的..我尝试过max-width，wordwrap，spacewrap等但它们似乎没有工作......请帮忙

Answer 1

不幸的是，只有部分解决方案只使用CSS来解决这个问题。解决方案要求您定义剪切将发生的长度，这在您在页面渲染过程中不知道确切长度时会出现问题。

这个解决方案看起来像是这样的：

＆＃13;

.clip {
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    width:100px;
}
button {
    white-space: nowrap;
}

＆＃13;

<table>
    <tbody>
        <tr>
            <td>
                <div class="clip">...some stuff</div>
                <div class="clip"><em> some long text in em</em></div>
            </td>
            <td>
                <button>...a long button that changes width</button>
            </td>
        </tr>
    </tbody>
</table>

＆＃13;

正如您所看到的，文本在100px之后会剪切，但为此您需要先定义宽度。此外，由于两列都没有换行，因此可能导致表本身忽略其定义的宽度和溢出。

然而，使用一些jQuery，您可以利用自动表重新调整大小来使其按照您的意愿运行：

＆＃13;

var w = $('.clip').first().width();
$('.clip').css({
  'white-space': 'nowrap',
  'width': w
});

＆＃13;

table {
  width: 300px;
}
.clip {
  text-overflow: ellipsis;
  overflow: hidden;
}
button {
  white-space: nowrap;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tbody>
    <tr>
      <td class="first">
        <div class="clip">...some stuff</div>
        <div class="clip"><em> some long text in em</em></div>
      </td>
      <td class="second">
        <button>...a long button that changes width</button>
      </td>
    </tr>
  </tbody>
</table>

＆＃13;

正如您所看到的，此处我们仅在绘制表格后添加width和no-wrap属性，以便列大小计算由按钮大小决定，不受干扰其他专栏。

请注意，如果需要，这也可以在没有jQuery的情况下实现，但这需要稍微复杂的代码。

防止<em>标签改变高度

1 个答案: