突出显示文本 - 如何获得一致的填充？

Question

我无法按照我的意愿显示此段落。文本和背景末尾之间的填充应在每一行上保持一致，如此图所示

HTML

<div id="title-image-container">
    <?php echo '<img src="'.get_post_meta($id, 'title-image', true).'">' ?> 
    <div class="highlight-title"><p><?php the_title(); ?></p></div>
</div> 

CSS

#title-image-container {
    float: left;
}
.highlight-title {
    position: relative;
    top: -300px;
    padding: 5px 5px 5px 10px;
}
.highlight-title p {
    background-color: red;
    display: inline; 
    color: #000;    
    font: 1.9em 'oswald';
    line-height: 60px;
    padding: 0 10px;
}
#content img {
    height: auto;
    margin: 0;
    max-width: 100%;
}

Answer 1

我通过简单地用另一个website上的评论替换带有阴影的填充来解决这个问题。

.highlight-title p {
    box-shadow: 10px 0 0 0 red, -10px 0 0 0 red;
    background-color: red;
    display: inline; 
    color: #000;    
    font: 1.9em 'oswald';
    line-height: 60px;
}

Answer 2

这将使您的工作完成 -

p{padding-left:5px;
padding-right:5px;
text-align:justify;
word-spacing:5px;}