html - 我可以用文本 "as-is"制作一个 css div 吗?

标签 html css text-alignment

假设我在 foo.html 文件中有这样的文本:

All the World's a Stage

All the world's a stage,
And all the men and women merely players;
They have their exits and their entrances,
And one man in his time plays many parts,

His acts being seven ages. At first, the infant,
Mewling and puking in the nurse's arms.
Then the whining schoolboy, with his satchel

And shining morning face, creeping like snail
Unwillingly to school. And then the lover,
Sighing like furnace, with a woeful ballad
Made to his mistress' eyebrow.

注意空格和换行符。我可以把它放到 div 中吗?并保留它与 css 的原样?而不是像放入 HTML 页面时那样将所有文本放在一起:

All the World's a Stage All the world's a stage, And all the men and women merely players; They have their exits and their entrances, And one man in his time plays many parts, His acts being seven ages. At first, the infant, Mewling and puking in the nurse's arms. Then the whining schoolboy, with his satchel And shining morning face, creeping like snail Unwillingly to school. And then the lover, Sighing like furnace, with a woeful ballad Made to his mistress' eyebrow.

我想要的是非常接近 <pre> 的行为标签,我想。

最佳答案

white-space: pre 应用到 div 元素上。

Sequences of whitespace are preserved, lines are only broken at newline characters in the source and at <br> elements.

文档:https://developer.mozilla.org/en-US/docs/Web/CSS/white-space

关于html - 我可以用文本 "as-is"制作一个 css div 吗?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28815926/

相关文章:

html - 使用 <a> 作为按钮的纯 CSS 选项卡

javascript - 将多个 CSS 类应用于 Angular 选择?

html - 具有自己的流程的 CSS float 注释

html - 对齐图像旁边的文本列表

php - 如何处理多选项卡表单(有或没有 jquery)

javascript - 在 React 中使用 React.forwardRef() 调用子组件函数的正确方法是什么?

html - 为什么嵌套在 ID 中的类元素不会覆盖其他 css 文件中的类元素?

javascript - 使用没有标题 ionic 的条纹标签

html - 文本对齐未按预期工作

css - 在图像旁边垂直对齐标题文本