在小屏幕上打断长字

Question

我有这条线：

<?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? */
}

Answer 1

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

Answer 2

code {
    overflow-wrap: break-word;
}

来自Mozzila Dev documentation

正在处理：

Google Chrome 4.0+
微软边缘 5.5+
Firefox Mozzila 3.5+
野生动物园 3.1+
Opera 10.5+

Answer 3

使用 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;
}

在小屏幕上打断长字

Break long words on small screens

css

php

word-wrap