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

Question

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

在下面的例子中，技术人员这个词对于div来说太大了，并且被迫在下面，在设备和右边界之间留下了很多空间。

有没有办法通过 CSS 或 jQuery 解决此问题？

DIV代码：

width:28%;
float:left;

Answer 1

要在任何位置换行，请使用值为word-break的CSS的break-all属性。

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

示例：

＆＃13;

＆＃13;

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

＆＃13;

<div>
  Electrical Appliance Technician
</div>

＆＃13;

＆＃13;

＆＃13;

如果您想使用...隐藏额外部分，请执行以下操作：

＆＃13;

＆＃13;

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

＆＃13;

<div>
  Electrical Appliance Technician
</div>

＆＃13;

＆＃13;

＆＃13;