使用html5是否可以使像Microsoft Word这样的“悬挂缩进”CTRL + T？

问题描述

如何使用html5制作类似于Microsoft Word的“悬挂缩进” (CTRL+T)？

.center-indent{
    /*some styles here*/   
}

是否有可能在这种情况下同时做出响应？还是我必须缩进每一行才能使其相似。

解决方法

是的，您可以为此使用padding和text-indent

p {
  padding-left: 5%;
  text-indent: -5%;
}

.fixed-px {
  padding-left: 20px;
  text-indent: -20px;
}

@media (min-width: 992px) {
  .fixed-px {
    padding-left: 15px;
    text-indent: -15px;
  }
}

/* more media queries here if necessary */

<p>
  Pharetra eros mi eros accumsan dui. Pellentesque ipsum iaculis. Mi neque in nonummy venenatis vestibulum. Class egestas adipiscing nisl tellus quam ut in amet. Nostra nunc leo lorem eget ipsum elit eget metus nam sed pede. Nam nibh risus sit dui nullam.
  Consequat luctus tempus.
</p>

<p>
  Pede tellus eu mattis morbi donec. Natoque class leo. Ac lacus vestibulum ac odio ac. Risus lorem mauris. Proin enim tortor at erat dui. Aliquam magna condimentum. Orci donec morbi. Id justo at malesuada erat nulla urna quam eu nec elit commodo mi voluptatum
  gravida ante bibendum justo. Eleifend nec eget. Id massa quis eu vitae elit. Bibendum interdum semper. Donec libero duis. Phasellus malesuada adipiscing qui et eu. Justo egestas erat auctor sagittis sed nonummy amet dolor et in id. Ut blandit justo.
  Donec fringilla cursus enim velit ullamcorper.
</p>

<p class="fixed-px">
  Pharetra eros mi eros accumsan dui. Pellentesque ipsum iaculis. Mi neque in nonummy venenatis vestibulum. Class egestas adipiscing nisl tellus quam ut in amet. Nostra nunc leo lorem eget ipsum elit eget metus nam sed pede. Nam nibh risus sit dui nullam.
  Consequat luctus tempus.
</p>

<p class="fixed-px">
  Pede tellus eu mattis morbi donec. Natoque class leo. Ac lacus vestibulum ac odio ac. Risus lorem mauris. Proin enim tortor at erat dui. Aliquam magna condimentum. Orci donec morbi. Id justo at malesuada erat nulla urna quam eu nec elit commodo mi voluptatum
  gravida ante bibendum justo. Eleifend nec eget. Id massa quis eu vitae elit. Bibendum interdum semper. Donec libero duis. Phasellus malesuada adipiscing qui et eu. Justo egestas erat auctor sagittis sed nonummy amet dolor et in id. Ut blandit justo.
  Donec fringilla cursus enim velit ullamcorper.
</p>

如果您使用%值，它将响应-或者您可以对每个断点使用media queries和固定的px值。