div里面的文字看起来像para

Question

我在div里面有文字，如下所示..

CSS

<div class="textwidget" style="white-space: nowrap;">

Mortgage basics
Mortgage 101
Glossary
Mortgage cal…

</div>

但在我的输出中它看起来像 -

输出

抵押贷款基础抵押贷款101GlossaryMortgage cal

如何使用css

逐一带回来

Answer 1

使用white-space: pre;代替white-space: nowrap;。

JSFiddle示例。

Answer 2

您可以使用换行符<br />

<div class="textwidget" style="white-space: nowrap;">

Mortgage basics<br />
Mortgage 101<br />
Glossary<br />
Mortgage cal…

</div>

Answer 3

使用white-space: pre;，其行为类似于HTML中的<pre>标记。

从文档中

  

pre：浏览器保留空格。文本仅包含换行符。类似于HTML中的<pre>标记

所以，使用

.textwidget{
    white-space: pre;
}

示例Fiddle

Answer 4

试试这个

 <div class="textwidget" style="word-wrap:break-word;">

Mortgage basics
Mortgage 101
Glossary
Mortgage cal…

</div>

希望对你有所帮助