如何让HTML中span标签内容自动换行并实现文本截断？

你的问题出在连续无空格的长文本默认不会被浏览器自动拆分换行，给<span>添加以下CSS属性即可实现自动换行：

方案1：强制任意位置换行 #

适合需要严格限制容器宽度，允许在任意字符处拆分文本的场景：

<div style='border: 1px solid; padding: 10px; margin-top: 5px;'>
  <h2 style='margin: 0;'>Name&nbsp-&nbsp#id</h2>
  <hr>       
  <span style='word-break: break-all;'>
    ContentContentContentContentContentContentContentContentContentContentContentContent
  </span>
</div>
<br>

方案2：优先单词边界换行 #

适合英文文本，仅当整个单词无法容纳时才拆分换行，避免无意义的单词拆分：

<div style='border: 1px solid; padding: 10px; margin-top: 5px;'>
  <h2 style='margin: 0;'>Name&nbsp-&nbsp#id</h2>
  <hr>       
  <span style='overflow-wrap: break-word;'>
    ContentContentContentContentContentContentContentContentContentContentContentContent
  </span>
</div>
<br>

如果需要在指定行数后截断文本并显示省略号，可以结合多行截断属性，比如限制3行：

<div style='border: 1px solid; padding: 10px; margin-top: 5px;'>
  <h2 style='margin: 0;'>Name&nbsp-&nbsp#id</h2>
  <hr>       
  <span style='display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; word-break: break-all;'>
    ContentContentContentContentContentContentContentContentContentContentContentContent
  </span>
</div>
<br>

内容的提问来源于stack exchange，提问作者RE8014