jquery - 如何使内容适合最小宽度，同时设置最大宽度？

<分区>

当句子太大时，折叠时会留下很多空白。

在下面的示例中，technician 一词对于 div 来说太大了，被迫位于下方，从而在 appliance 和右边框之间留下了很大的空间。

有没有办法用 CSS 或 jQuery 来解决这个问题？

problem

DIV代码:

width:28%;
float:left;

最佳答案

要在换行的任何位置断开一个单词，然后使用值为 break-all 的 CSS 的 word-break 属性。

div {
  float: left;
  with: 28%;
  word-break: break-all;
}

例子:

div {
  background-color: #f00;
  float: left;
  width: 28%;
  word-break: break-all;
}

<div>
  Electrical Appliance Technician
</div>

如果你想用 ... 隐藏额外的部分，那么这样做:

div {
  background-color: #f00;
  float: left;
  width: 28%;
  overflow-x: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

<div>
  Electrical Appliance Technician
</div>

关于jquery - 如何使内容适合最小宽度，同时设置最大宽度？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/39065230/

相关文章：

javascript - 使用 Nokogiri 抓取 JavaScript