网页中的纯文本如何强制换行(txt文件)

亮术网 2017-05-15 本网原创

  有的时候需要把文本文件中的内容显示到网页中,显示效果非常糟糕,比txt文本文件还差,不但没有行间距,连段落也没有了,所有段落被合并成一段,可阅读性变得十分差,可能阅读一会就不想读了。通常的处理方法是把每一段加上网页的段落标签或在每段的后段加上换行标签,如果网站有这个功能,这样处理再好不过;如果网站当初没有写这个功能,有没有办法让纯文本强制换行?

  html标签中有一个 <pre></pre> 标签,它正是用来显示纯文本的标签,把txt文件中的纯文本显示到 <pre></pre> 中,纯文本会依照 txt文件中的换行标记强制换行。这样就很好的解决了纯文本的换行问题,但段与段之间的距离不太好控制,要么距离太大要么距离太小,不易用CSS定义为段与段之间距离小一些、每几段之后距离应该适当大一些。

 

  网页中的纯文本如何强制换行实例

  html代码:

  <div id="div">
<pre style="white-space: pre-wrap; word-wrap:break-word;">用了html段落标记,纯文本被强制换行;不用段落标记,纯文本不会自动换行,所有在txt文本文件中的内容会合并为一段,阅读性相当差。
这是第二段,用了 <pre></pre> 标签,本段会另起一行显示,不用 <pre></pre> 标签,本段会接在第一段的后面。</pre>
</div>

 

  CSS代码:

  .div{margin:10px 0px; position:relative; border:1px solid #787878; width:420px; height:132px; line-height:24px;}

  效果预览:

用了html段落标记,纯文本被强制换行;不用段落标记,纯文本不会自动换行,所有在txt文本文件中的内容会合并为一段,阅读性相当差。
这是第二段,用了 <pre></pre> 标签,本段会另起一行显示,不用 <pre></pre> 标签,本段会接在第一段的后面。

  值得注意的是,用 <pre></pre> 标签是按照文本文件中的段落强制换行,也就是文本文件中的一段如果超过网页中定义的宽度,则不会自动换行,会显示到元素的外面,如果想强制换行,需在 pre 的 style 属性中加 word-wrap:break-word。

本文浓缩标签:纯文本换行text