为具有-ve文本缩进的段落应用背景颜色

Question

在我的一个html页面中，我有段落标签，如下所示。

<P style="MARGIN-LEFT: 0.5in; BACKGROUND-COLOR: #656565;TEXT-INDENT: -0.25in; TEXT-ALIGN: justify;" >my text here</P>

在vb6网页浏览器控件中，我们加载这些页面并根据特定条件突出显示背景颜色。它适用于所有text和html元素。但是对于具有-ve值的TEXT-INDENT的段落，它不能正常工作，并且突出显示将不完整，并且它不会突出显示文本的起始.25英寸。那怎么突出？在下图中，第一个是错误情况（带有文本缩进），第二个是没有缩进。

那么即使指定了文本缩进，现在如何为这些文本应用背景颜色？

Answer 1

您无法以预期的方式执行此操作，但您可以减少边距并使用与指定的缩进值相关的金额向元素添加填充。

Demo Fiddle

<P style="MARGIN-LEFT: 0.25in; BACKGROUND-COLOR: #656565;TEXT-INDENT: -0.25in;padding:0 .25in; TEXT-ALIGN: justify;" >my text here<br />more text here</P>

请注意，您应该始终尝试为CSS使用小写字符，并使用样式表而不是内联值。

HTML

<p>
   my text here
   <br />
   more text here
</p>

CSS

p {
    margin-left: 0.25in;
    background: #656565;
    text-indent: -0.25in;
    padding:0 .25in;
    text-align: justify;
}

Answer 2

如果您希望first-line比其他absolute宽一点，您可以使用0.25in标记或伪width 1.2em并平均height {{1 }}

<强> DEMO

p{
  margin-left: 0.5in;
  background-color:#656565; 
  text-indent:-0.25in;
  text-align:justify; 
  box-sizing:border-box;
}
p:before {
  content:'';
  height:1.4em;/* average height of a line , to reset to match line-height if set on parent */
  width:0.25in;/* at least equal to negative indent */
  position:absolute;/* but no coordonates, let it follow text flow */
  z-index:-1;/* under text plz*/
  background-color:#656565; /* value can be inherit */
}

Answer 3

理想情况下，您无法对<p>本身执行此操作。你必须为它创建一个容器，然后这样做。将元素包装在div中时总是最好的。这是一个很好的网站架构实践。

这是DEMO

这是代码

<div class="box">
   <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur sodales ligula in libero.        </p>
</div>

.box{
    background-color:#656565;
    width:600px;
    height:100%;
    padding: 10px 30px 10px 0px;

 }
  p{
     margin-left: 0.5in; /* WHY INCHES? CAN YOU DO EM OR PX? */
     text-indent:-0.25in;
    text-align:justify; 
     box-sizing:border-box;
 }