1

私は基本的にテキストインデントを含む段落でこれを実行しようとしていますが、display：inlineではテキストインデントが許可されていないため、取得できません。何か案は？

4

2 に答える 2

4

疑似要素の使用

JSFiddleの例を作成しました。この例では、span要素を追加してからinline追加しbefore、after疑似要素を使用して、強調表示された各テキストブロックの前後に間隔を追加します。

そのスペースの量を操作する必要がある場合は、font-sizeそれらの疑似要素内で調整してください。

秘訣は次のとおりです。

.highlight {
    font-family: Helvetica, Sans-serif;
    font-size: 48pt;
    font-weight: bold;
    text-transform: uppercase;
}
    .highlight:before,
    .highlight:after {
        /* no-breaking-space (nbsp) entity */
        content: "\00a0";
    }

スペース量の制御

適切な文字:beforeと:after疑似要素を使用して、実際に追加される間隔の量を個々のピクセルまで制御できます。

最良の方法はthin space、活字の用語でemの1/5または場合によっては1/6であるものを使用することです。これらの2つの疑似要素を6ピクセルに設定font-sizeすると、寸法の不一致に関係なく、シンスペースは常に1ピクセル幅に近似するはずです。

.highlight:before,
.highlight:after {
    content: "\2009";
    font-size: 6px;
}

上部のスタイル定義では、両側に1ピクセルのスペースが追加されます。コンテンツに5つの薄いスペースを入れると、5ピクセルのスペースが得られます...

または、1つの薄いスペースを使用してそれにパディングを追加し、この方法でその幅を制御します。または、コンテンツを廃止して、パディングを使用することもできます。

.highlight:before,
.highlight:after {
    content: "";
    padding: 0 5px; /* will give 10px space */
}

ただし、スペースの量をピクセルの粒度まで制御することは可能です。

于 2012-11-04T15:47:41.197 に答える
3

brタグなし：デモはこちら：http：//jsfiddle.net/korigan/jzm3qu1q/1/

HTML

 <div class="wrap">
     <p class="highlight">
        <span class="text">Amet assumenda atque eos excepturi harum ipsa</span>
     </p>
 </div>

CSS

.wrap {
    width: 150px;
}
.highlight {
    color: #fff;
    display: inline;
    background: blue;
    font-size: 25px;
    font-weight: normal;
    line-height: 1.2;
}
.highlight .text {
        padding: 4px;
        box-shadow: 4px 0 0 blue, -4px 0 0 blue;
        background-color: blue;
        box-decoration-break: clone; /* For Firefox */
}
于 2015-07-24T13:13:23.810 に答える