11

次のHTMLについて考えてみます。

<p>This is a potentially large paragraph of text, which <span>may get 
wrapped onto several lines when displayed in the browser.
I would like to be able to draw a minimal</span> box round the span</p>

スパンの周りに最小限の境界線を描きたいと思います。

あれは：

  • スパンが1行でレンダリングされる場合、境界線はCSSスタイルの境界線を設定するのと同じです。
  • スパンが複数の線でレンダリングされる場合、境界は、交差する線の間ではなく、スパンの最も外側のエッジの周りに描画されます。これは、スパンにCSSの背景色を設定し、強調表示された領域のエッジの周りに線を引くのと同じです。

私はこれが生のCSSだけではできないとかなり確信しています（2番目の場合）。javascriptライブラリ、またはFirefox固有のソリューションを含むソリューションは許容されます。

これは、2番目のシナリオがどのように見えるかのモックアップです。

2番目のシナリオのモックアップ

4

1 に答える 1

13

境界線ではなく、アウトラインを追加することを検討してくださいhttp://jsfiddle.net/tarabyte/z9THQ/

span {
  outline: 2px solid black;   
}

Firefoxは線の間に輪郭を描きます。ワークアロンドがあります： http：//jsfiddle.net/z9THQ/2/

.wrapped {
   outline: 2px solid black;
}

.wrapped span {
    border: 1px solid white;
    background-color: white;
    position: relative;
    z-index: 1000;
}
<p>
   This is a potentially large paragraph of text, which 
      <span class="wrapped"><span> 
        may get wrapped onto several lines when displayed in the browser. I would like to be able to draw a minimal
      </span></span> 
   box round the span
</p>

于 2012-12-04T15:26:12.227 に答える