如何避免文本, 在标记前, 从容器中

使用该标签 <上一页> 在 HTML es una manera sencilla de visualizar 格式化的内容. 通常用在当您想要显示的某些部分 代码源 或任何其它类型的文本的外观打算不同正常人在网站上使用.

要使用此标签, 如果这没有任何样式, 正常的事情是，当屏幕尺寸较小的设备上显示, 其中的文本是 从容器中.

作为示例, a continuación vemos 两个文本, 在标记内的一个人 <p> ,带有红色边框, 和标签上的另一种 <上一页> con borde verde.

正如你可以看到, 取决于屏幕 从哪里，设备，您正在查看这篇文章, 如果标记内的文本 <上一页> 不适合 通过在容器中全, 这出来同样的.

为修复这一问题, 你所要做的是 修改样式 标签 <上一页> 添加 los siguientes 属性到你 CSS:

pre {
   border: 1px solid green;
   white-space: pre-wrap;       /* Since CSS 2.1 */
   white-space: -moz-pre-wrap;  /* Mozilla, since 1999 */
   white-space: -pre-wrap;      /* Opera 4-6 */
   white-space: -o-pre-wrap;    /* Opera 7 */
   word-wrap: break-word;       /* Internet Explorer 5.5+ */
}

pre {

border: 1px solid green;

white-space: pre-wrap; /* Since CSS 2.1 */

white-space: -moz-pre-wrap; /* Mozilla, since 1999 */

white-space: -pre-wrap; /* Opera 4-6 */

white-space: -o-pre-wrap; /* Opera 7 */

word-wrap: break-word; /* Internet Explorer 5.5+ */

}

获取结果你那时一样显示:

你可以看到它在 选项卡 代码 CSS.

以这种方式, 你可以这样做内容驻留在上你 标签 <上一页> 从容器中, 这就是适应在同一, 取决于屏幕的大小.