打破长行句的方法

Question

我正在为我的网站开发一个iPhone主题，你能否打破这样的长句：

A long sentence would go past the iPhone screen and I need this to break

进入这个：

A long sentence would go past the iPhone
screen and I need this to break

显示如下：

http://uimgz.com/i/M8U5X5f2d1.png

Answer 1

根据：https://developer.mozilla.org/en-US/docs/Web/CSS/white-space#Browser_compatibility

pre {
  word-wrap: break-word;      /* IE 5.5-7 */
  white-space: -moz-pre-wrap; /* Firefox 1.0-2.0 */
  white-space: pre-wrap;      /* current browsers */
}

word-wrap似乎不再起作用，请改用<{1}}

Answer 2

如果您的文本有空格，则为wrap元素添加宽度将自动中断文本。但是如果你有一个没有空格的文本（例如链接），你可以使用break-word：

.your-selector {
  word-wrap: break-word;
}

Answer 3

我认为问题是“视口”比设备的屏幕宽。有关背景和可能的解决方案，请参阅this post。