Question

我有这段代码：

＆＃13;

.mydiv {
  display: table;
  table-layout: fixed;
  width: auto;
  max-width: 448px;
  height: 56px;
}

.mydiv span {
  display: table-cell;
  vertical-align: middle; 
  overflow: hidden;
}

＆＃13;

<div class="mydiv">
  <span></span>
</div>

＆＃13;

这在大多数时候都可以正常工作，因为默认情况下，如果文本比一行长，则行在最近的空格处断开，而单词永远不会被分成半字。好。

但是，在唯一一个句子没有空格的情况下（这绝不应该发生，但人们就是人），界面会断开，然后长单词将保留在一行上。

有没有办法优先考虑css，这样，如果有空格，则剪切句子而不剪切单词（word-wrap：break-word;）但如果单词大于一行，则换行，切断这个词（关键词：break-all;）以避免视觉灾难。按此顺序。

到目前为止，如果我使用＆＃34;自动换行：break-word;＆＃34;，一个长字将保留在一行，无论其长度如何，如果我使用＆＃34; word-break：打破-所有;＆＃34;即使之前有空位，这些词也会被打破。这些标准解决方案都没有帮助。

任何帮助都将不胜感激。

我想要一个CSS解决方案，最好是，但如果不可能，JS / jQuery解决方案也会这样做。

PS：我需要div具有最大宽度的自动宽度，我需要跨度来保持表格单元格。

Answer 1

您可以使用$('.LoadMedia').on('change', function() { var file = $(this)[0].files[0]; // Do stuff to store binary file in local filesystem under predetermined path here }执行此操作，但必须将word-wrap: break-word 属性的值设置为width启用响应能力：

＆＃13;

100%

＆＃13;

.mydiv {
  display: table;
  table-layout: fixed;
  width: 100%; /* responsiveness */
  max-width: 448px;
  height: 56px;
  border: 1px solid; /* just for demo */
}

.mydiv span {
  display: table-cell;
  vertical-align: middle; 
  overflow: hidden;
  word-wrap: break-word; /* added */
}

＆＃13;

只有在没有空格的情况下才会打破单词

1 个答案: