包装时DIV中文本缩进的最佳方法是什么？

5 回答

• 6

  对于可变尺寸和固定尺寸的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>
  

  回复于 2024-05-03T19:52:48+08:00
• 44

  如果我理解你的要求，这对我有用：

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

  回复于 2024-05-03T19:52:48+08:00
• 1

  不确定跨浏览器支持，但您可以使用first-line pseudo-element：

  p {padding:10px;}
  p:first-line {padding-left:0px;}
  
  <p>Hello World, I'm Jonathan Sampson</p>
  

  将被视为

  你好世界我
  乔纳森
  桑普森

  除此之外，你可以给元素左边填充，然后是负文本缩进 .

  回复于 2024-05-03T19:52:48+08:00
• 0

  W3C说你只需要使用text-indent属性 .

  source

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

  回复于 2024-05-03T19:52:48+08:00
• 6

  使用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>
  

  回复于 2024-05-03T19:52:48+08:00