Усечение текста до следующей строки с использованием CSS

Question

У меня есть поле, похожее на это на изображении

Я хочу обрезать текст, чтобы следующие слова были видны в следующей строке. Примерно так:

Я использую:

width: 230px;
text-overflow: ellipsis;

Но с многоточием это становится ABCD DESB EAR E ... Есть ли способ перенести его на следующую строку?

Ниже приводится html:

<tbody role="ppt"><tr role="ppt"><td class="dijitButton" role="presentation"><div class="dijitButtonText" data-dojo-attach-point="textDirNode" role="ppt"><span role="opt" aria-selected="true" class="dijitValidationTxtBxLbl " style="width: 230px;text-overflow: ellipsis;
">Walmart.com/Jet.com Price</span></div><div class="dijitContainer"></tbody>

.dijitValidationTxtBxLbl {
  width: 230px;
  text-overflow: ellipsis;
}

<table>
<tbody role="ppt">
  <tr role="ppt">
    <td class="dijitButton" role="presentation">
      <div class="dijitButtonText" data-dojo-attach-point="textDirNode" role="ppt"><span role="opt" aria-selected="true" class="dijitValidationTxtBxLbl">Walmart.com/Jet.com Price</span></div>
      <div class="dijitContainer"></div>
      </td>
</tr>
</tbody>
</table>

Answer 1

набор word-wrap: break-word; для dijitValidationTxtBxLbl класс:

.dijitValidationTxtBxLbl {
  width: 230px;
  word-wrap: break-word;
}