Javascript 如何设置长文档的格式<；预处理>；适用于宽度受限设备（如iPhone）的HTML块

我有一个长的pre块，我希望它可以在移动浏览器中查看，比如iPhone

e、 g

如何使文字包装，但保留缩进

e.g.
    a very long pre block start here here here here here here 
    here here here here
        2nd line with intent
            3rd line with intent

我不想在移动设备上使用滚动条，所以最好有一些方法自动包装句子

我尝试过的最相似的方法是使用CSS

 pre {
            white-space: pre-line;
        }

但并不像我想的那样，如上所述

---

更新：链接：

不是最理想的解决方案，也可能不是您正在寻找的解决方案，但它仍然是一个解决方案。它使用jQuery将预块替换为列表，因为列表在文本换行时保留缩进

---

对pre的内容进行文字包装，这样您就不会超过固定值

pre {
 width:100%;
 word-wrap:break-word;
}

这可能会解决你的问题

---

您还可以将宽度更改为不超过iphone浏览器宽度的固定宽度。关键是要包装文本，这样就不会迫使外壳元素的宽度大于屏幕。

恐怕没有办法使用CSS，因为CSS不知道元素的实际文本内容，比如前导空格。因此需要一些不同的方法。如果您可以控制标记，则可以将

pre

元素替换为

div

元素，该元素包含与所需缩进级别对应的

class

属性的单行

div

元素。然后，您只需指定合适的左边距。演示：

（演示使用

ch

单位设置左边距，但使用

em

单位设置作为合理的备份。对于单空格字体，一个

em

接近两个字符的宽度。）

这无法处理

pre

的所有功能，因此如果需要保留行中的多个空格，请添加

空格：pre-wrap

更合乎逻辑的方法是使用嵌套的

div

元素，以便嵌套的深度与缩进的级别相对应。这将使样式表变得简单，但标记看起来很笨拙

如果您无法控制HTML标记，您可能需要在客户端进行操作（将

pre

元素转换为其他元素），类似于AncientMan建议中的代码。

或者您可以使用PHP（或类似的东西）。例如：

<?php
$text = "A very long woooooooooooord.";
$newtext = wordwrap($text, 8, "\n", true);

echo "$newtext\n";
?>

检测已使用的浏览器/平台：

$browser = get_browser(null, true);
print_r($browser);

对于移动操作系统，您可以使用if/else语句和wordwrap函数来中断并显示您的内容。例如：

<?php
$text = "A very long woooooooooooord.";
$newtext = wordwrap($text, 8, "\n", true);

echo "$newtext\n";
?>

---

这里有一种使用Javascript的方法。这通过

pre {
    word-wrap:break-word;
}

HTML:

1.一个很长的街区开始
A.第二行，带缩进长预块，从这里开始
A.带缩进的第三行
B.第四行缩进长预块从这里开始
C.第五行
2.第六行

CSS:
pre{
边框：1px纯黑；
高度：460px；
宽度：320px；
空白：预包装；
}

输出：
这适用于我在iOS和Android上尝试过的所有移动浏览器。如果您想要屏幕截图，请告诉我。所需要的只是一个css标签

PRE将自动填充其容器。只要您的容器大小与屏幕的宽度相匹配并且没有溢出，它就可以完美地工作（保留单词换行符之间的缩进）。
试试这个：pre{white space:pre wrap；word wrap:break word}现在，上面的第二行和第三行是文本的一部分吗？或者您希望创建具有进一步缩进的新行吗？@LotusH，是的，非常类似，请参见：，除了新行与第一行不对齐之外line@Howard您所说的“不与第一行对齐”是什么意思？您希望它们从同一位置开始，而不希望缩进吗？如果是这样，则只有“word wrap:break word”可以。@LotusH，当您在浏览器中调整此页的大小时：，当宽度变小时，字符串将被包装到第二行，但它与第一行的意图不同。