在 DIV 中换行时缩进文本的最佳方法是什么？

发布于 2024-07-13 04:28:47 字数 434 浏览 7 评论 0原文

所以我有一个包含一些动态文本的 DIV。假设我知道文本和字体大小，但不知道 DIV 的大小。我希望 DIV 中文本的显示足够智能，以便在文本换行时显示缩进。

假设我的原始文本看起来像这样：

Lorem ipsum dolor sit amet, 
consectetur adipisicing 
elit, sed do eiusmod 
tempor incididunt

相反，我希望它看起来像这样：

Lorem ipsum dolor sit amet, 
   consectetur adipisicing 
   elit, sed do eiusmod 
   tempor incididunt

如果我事先不知道 DIV 的大小，那么最好的方法是什么？如果我知道尺寸，最好的方法是什么？

谢谢！

原文

So I have a DIV that contains some dynamic text. Let's say I know the text and font-size but I don't know the size of the DIV. I'd like the display of the text in the DIV to be intelligent enough to show indentation when text wraps.

Say my original text looked something like this:

Lorem ipsum dolor sit amet, 
consectetur adipisicing 
elit, sed do eiusmod 
tempor incididunt

Instead, I want it to look like this:

Lorem ipsum dolor sit amet, 
   consectetur adipisicing 
   elit, sed do eiusmod 
   tempor incididunt

What's the best way to do this if I don't know the size of the DIV a priori? And what's the best way to do it if I do know the size?

Thanks!

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

别念他 2024-07-20 04:28:47

如果我明白你的要求，这对我有用：

div {
    padding-left: 2em;
    text-indent: -2em;
}

If I understand what you're asking for, this works for me:

div {
    padding-left: 2em;
    text-indent: -2em;
}

回复收藏 0 原文

浅唱ヾ落雨殇 2024-07-20 04:28:47

W3C 说你只需要使用文本缩进属性。

来源

.indentedtext
{
    text-align: start;
    text-indent: 5em;
}

W3C says you just have to use text-indent property.

source

.indentedtext
{
    text-align: start;
    text-indent: 5em;
}

回复收藏 0 原文

无法言说的痛 2024-07-20 04:28:47

这对于可变和固定大小的 DIV 应该同样有效。

<div style="width: 150px; text-indent: -2em; padding-left: 2em;">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
    incididunt.
</div>

This should work equally well for both variable and fixed size DIVs.

<div style="width: 150px; text-indent: -2em; padding-left: 2em;">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
    incididunt.
</div>

回复收藏 0 原文

浅笑依然 2024-07-20 04:28:47

代码

为此，只需在 CSS 文件中添加以下代码即可。

div {
  padding-left: 2em;
  text-indent: -2em;
  display: inline-block;
}

<div>
  Stack Overflow is a great place for 
  developers of all levels to come
  together and help each other - as
  well as other people - to solve a question!
</div>

说明

padding-left 会在左侧尺寸上添加一些填充以缩进。

text-indent 定义第一行的缩进，因此通过将该值设置为 -2，我们将覆盖 padding-left 的值> （如2 - -2 = 0）。因此，简而言之，text-indent 将填充大小反转回 0。

display 只会检查它的外观。有关详细信息，请参阅 display MDN。

Code

For this to work, just add the following code in your CSS file.

div {
  padding-left: 2em;
  text-indent: -2em;
  display: inline-block;
}

<div>
  Stack Overflow is a great place for 
  developers of all levels to come
  together and help each other - as
  well as other people - to solve a question!
</div>

Explanation

padding-left will add some padding to the left size to indent it.

text-indent defines the indentation of the first line's indentation, so by setting the value to -2, we are overriding the value of padding-left (as 2 - -2 = 0). So, in short, text-indent reverses the padding size back to 0.

display will just check the way it looks. For more information about this, see display on MDN.

回复收藏 0 原文

野心澎湃 2024-07-20 04:28:47

使用 CSS text-indent 属性：

.box {
  border: 1px solid #ddd;
  background: #fff;
  max-width: 300px;
  padding: 15px 15px 15px 45px;
}  

.box p {
  font-family: Arial, sans-serif;
  line-height: 1.5;
  margin: 0;
  text-align: justify;
  font-size: 12px;
  text-indent: -30px;
}

<div class="box">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo repellendus natus minima ex possimus? Pariatur odit distinctio, similique, adipisci nesciunt molestias iusto ipsa repellendus recusandae unde, enim veniam voluptatem expedita.</p>
</div>

Use the CSS text-indent property:

.box {
  border: 1px solid #ddd;
  background: #fff;
  max-width: 300px;
  padding: 15px 15px 15px 45px;
}  

.box p {
  font-family: Arial, sans-serif;
  line-height: 1.5;
  margin: 0;
  text-align: justify;
  font-size: 12px;
  text-indent: -30px;
}

<div class="box">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo repellendus natus minima ex possimus? Pariatur odit distinctio, similique, adipisci nesciunt molestias iusto ipsa repellendus recusandae unde, enim veniam voluptatem expedita.</p>
</div>

回复收藏 0 原文

~没有更多了~