截断手机上的长文本答案

【问题标题】：Truncate a long text on mobile phones截断手机上的长文本
【发布时间】：2017-06-18 06:29:15
【问题描述】：

我有一个问题！我的 div 可以有很长的文本。这个div没有固定高度，手机上也有问题。

例如，我的设备宽度为 320 像素，但内部 div 的宽度为 454 像素。它发生在长词上。您可以在codepen 上查看我的问题。

我可以只用 CSS 来修复它吗？

如果您能帮我解决这个问题，我将不胜感激！

【问题讨论】：

你的意思是内盒需要有一个比设备大的固定宽度吗？
不，内盒没有固定宽度。内盒需要有 100% 的宽度。
如果你不希望你的 div 有一个固定的高度，你想如何截断它的内容？它应该有一个最大高度吗？它应该有窗口的高度吗？
另外，你提到了一次高度和一次宽度，哪个是问题？
只是在移动设备上制作宽度为 100% 的 div ？

标签： html css truncate

【解决方案1】：

使用这个css代码：

p{width:100px;
height:auto;
border:2px solid #000;
  overflow-wrap: break-word;}

&lt;p&gt; this is a biggggggggggggggggggg word&lt;/p&gt;

【讨论】：

谢谢！但我没有固定的宽度。我的解决方案：

 .content { -ms-word-break: break-all;断词：打破一切； word-break：断词； -webkit-连字符：自动； -moz 连字符：自动；连字符：自动； }

【解决方案2】：

我已经用这个 css 代码解决了我的问题：

.breaking {
     -ms-word-break: break-all;
      word-break: break-all;
      word-break: break-word;
  -webkit-hyphens: auto;
     -moz-hyphens: auto;
          hyphens: auto;
}

CBroe，感谢您的帮助。

【讨论】：