16


下線letter-spacingや下罫線のあるものに を適用すると、下線が右側のテキストからはみ出しているように見えます。下線がテキストの最後の文字を超えないようにする方法はありますか?

例えば：

<span style="letter-spacing: 1em; border-bottom: 1px solid black;">Test</span>

おそらく、固定幅<div>と境界線で可能ですが、それは実際にはすべての下線付き要素を囲むオプションではありません.

ありがとう！

4

7 に答える 7

9

完璧ではありませんが、これまでに思いついた最善の解決策は、:after 疑似要素でマスクすることです。このようにして、テキスト全体に余分な要素は必要ありません。

例えば：

h1 {
  /* A nice big spacing so you can see the effect */
  letter-spacing: 1em;
  /* we need relative positioning here so our pseudo element stays within h1's box */
  position: relative;
  /* centring text throws up another issue, which we'll address in a moment */
  text-align: center;
  /* the underline */
  text-decoration: underline;
}

h1:after {
  /* absolute positioning keeps it within h1's relative positioned box, takes it out of the document flow and forces a block-style display */
  position: absolute;
  /* the same width as our letter-spacing property on the h1 element */
  width: 1em;
  /* we need to make sure our 'mask' is tall enough to hide the underline. For my own purpose 200% was enough, but you can play and see what suits you */
  height: 200%;
  /* set the background colour to the same as whatever the background colour is behind your element. I've used a red box here so you can see it on your page before you change the colour ;) */
  background-color: #990000;
  /* give the browser some text to render (if you're familiar with clearing floats like this, you should understand why this is important) */
  content: ".";
  /* hide the dynamic text you've just added off the screen somewhere */
  text-indent: -9999em;
  /* this is the magic part - pull the mask off the left and hide the underline beneath */
  margin-left: -1em;
}

<h1>My letter-spaced, underlined element!</h1>

以上です！

色や配置などを細かく制御したい場合はボーダーを使用することもできますが、幅が固定されていない限り、スパン要素を追加する必要があります。

たとえば、現在、h3 要素に 2px の文字間隔、中央揃えのテキスト、およびテキストと下線の間にスペースを追加した下線を必要とするサイトに取り組んでいます。私のcssは次のとおりです。

h3.location {
  letter-spacing: 2px;
  position: relative;
  text-align: center;
  font-variant: small-caps;
  font-weight: normal;
  margin-top: 50px;
}

h3.location span {
  padding-bottom: 2px;
  border-bottom: 1px #000000 solid;
}

h3.location:after {
  position: absolute;
  width: 2px;
  height: 200%;
  background-color: #f2f2f2;
  content: ".";
  text-indent: -9999em;
  margin-left: -2px;
}

私のHTMLは次のとおりです。

<h3><span>Heading</span></h3>

ノート：

これは 100% きれいな CSS ではありませんが、少なくとも同じ結果を得るために HTML を変更したりハッキングしたりする必要がないことを意味します。

背景画像のある要素でこれを試す必要はまだないので、これを達成する方法はまだ考えていません。

テキストを中央に配置すると、ブラウザーはテキストを間違った場所に表示するため (テキストとその後の余分なスペースが考慮されます)、すべてが左に引っ張られます。text-indent 0.5em (上の例で使用した 1em の文字間隔の半分) を h1 要素 (:after 疑似要素ではない) に直接追加すると、これは修正されるはずですが、まだテストしていません。

フィードバックをお待ちしております。

ニール

于 2011-12-05T14:45:32.660 に答える
7

問題は、「文字間隔」が各文字の後に空白を追加してスペースを追加することですが、このスペースは文字に属しているため、最後の文字に余分な下線があり、最後の文字を超えて拡大しているように見えます ( div の最後の文字をマウスで選択すると、意味がわかります)。

テキストブロックの最後の文字が「文字間隔」プロパティを持たないようにすることで解決できます。例えば：

<span style="letter-spacing: 1em; text-decoration: underline;">SPACEEE</span>
<span style="text-decoration: underline;">.</span>

理想とはほど遠いですが、1 行のテキストでない限り (右側に負のマージンを使用できます)、他の解決策は考えられません。

于 2010-10-25T14:12:05.833 に答える
1

私の知る限り、これについてあなたにできることは何もありません。ほとんどのブラウザは、最後の文字を含め、各文字の後に文字間隔を追加していると思います。文字間隔を細かく制御できる CSS プロパティはありません。

これは、私の Mac 上の Firefox 3.6 で問題を解決しているように見えますが、下線付きのすべての要素に対してこれを行うのも非常に実用的ではありません。

<span style="border-bottom: 1px solid black;">
    <span style="letter-spacing: 1em;">Tes</span>t
</span>
于 2010-10-25T14:10:39.157 に答える
0

"Test" の最後の文字を分割したくない場合は、a で囲んで次のようにしspanます。

span {
    letter-spacing: 1.1em;
    margin-right: -1.1em;
}

ご覧のとおり、弾性ユニットでも機能します。にカスタム マージンがない場合は、aの追加をスキップして、spanこのスタイルを に直接適用できます。a

それは私にとって驚異的に機能します=）

于 2011-01-13T05:00:45.573 に答える
0

回答ありがとうございます。css/html の制限だと思います。幸いなことに、これらのリンクはphp経由で配置されていたので、それらを適切に囲むスクリプトを作成しました.完全に理想的な解決策ではありませんが、うまくいきます:

$part1 = substr($string, 0, -1);
$part2 = substr($string, -1);
$full = "<span style='letter-spacing: 1em'>".$part1."</span><span>".$part2."</span>";

(要素全体をリンクまたは下線などでラップする必要がある場合に、文字間隔のないスタイルを適用できるように、最後に含めた文字の 2 番目のスパン)

残念なことに、下線の制御は html/css ではかなり制限されています (特に線とテキストの間の距離、太さなどを定義しようとしている) が、今のところこれでうまくいくと思います。

于 2010-10-26T16:55:40.113 に答える