在小屏幕上打断长词答案

【问题标题】：Break long words on small screens在小屏幕上打断长词
【发布时间】：2016-08-23 19:48:20
【问题描述】：

我有这行：

<?php echo htmlspecialchars($_SERVER["PHP_SELF"]); ?>

这是代码元素的一部分。

我要做的是在小屏幕上查看该行（没有水平滚动）。

我已经尝试在http://www.w3schools.com/css/css3_text_effects.asp 的帮助下同时设置<pre> 和<code> 的样式 - 仍然没有断线！

code { 
  width: 90%;
  min-width: 200px;
  background-color: white;
  border: 1px solid black;
  margin: auto;
  font-size: 1rem;
  /* ... and now what? */
}

【问题讨论】：

标签： php css word-wrap

【解决方案1】：

使用overflow-wrap CSS 属性应该可以解决您的问题

code {
  overflow-wrap: break-word;
  word-wrap: break-word;

  -ms-word-break: break-all;

  /* This is the dangerous one in WebKit, as it breaks things wherever */
  word-break: break-all;

  /* Instead use this non-standard one: */
  word-break: break-word;
}

【讨论】：

附加信息我从caniuse.com获取了一些信息
好的，当它是一行时它工作得很好。但是如果有几行（在 pre 元素内查看 preety）怎么办？当它超过一行时，似乎 css 在小屏幕上没有影响。

如果我没记错的话，

 元素的定义就是说它是预先格式化的。

所以如果我想在小屏幕上查看一段代码我应该使用什么？对于 1 行代码，您的答案很好。我应该使用 textarea 而不是 pre 吗？ PRO做什么？ (:
您能否在 sn-p 或 fiddle 中粘贴您呈现的 HTML 的样子

【解决方案2】：

您只需添加：word-wrap: break-word;
http://www.w3schools.com/cssref/tryit.asp?filename=trycss3_word-wrap

【讨论】：

请不要引用 w3schools 是有据可查的，因为它不是我推荐的最准确的来源link
@happymacarts 是的，但是如果您向他们发送 Mozzila Dev 文档链接，大多数不知情的人会认为这仅适用于 Firefox 浏览器
@DermannDekovic 也许可以作为帖子的一部分进行解释，顺便说一句，感谢您的编辑。

【解决方案3】：

code {
    overflow-wrap: break-word;
}

来自Mozzila Dev documentation

正在处理中：

谷歌浏览器 4.0+
Microsoft Edge 5.5+
Firefox Mozzila 3.5+
Safari 3.1+
Opera 10.5+

【讨论】：

抱歉刚刚复制了您的帖子。我离开了它，因为它更彻底
@happymacarts 没问题，比较彻底。