CSS Text Underlining Too Long When Letter-Spacing Is Applied

CSS Text underlining too long when letter-spacing is applied?

The problem is that "letter-spacing" adds space by adding white space after each letter, but this space belongs to the letter, and thus the last one has an extra underline that makes it look like it's expanding beyond the last letter (if you select with the mouse the last letter of the div, you'll see what I mean).

You could solve it by having the last letter of the text block not having the "letter-spacing" property. For example:

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

It's far from ideal, but unless it's just a one line text (there, you could use a negative margin to the right), I can't think of any other solution.

How to increase the gap between text and underlining in CSS

No, but you could go with something like border-bottom: 1px solid #000 and padding-bottom: 3px.

If you want the same color of the "underline" (which in my example is a border), you just leave out the color declaration, i.e. border-bottom-width: 1px and border-bottom-style: solid.

For multiline, you can wrap you multiline texts in a span inside the element. E.g. <a href="#"><span>insert multiline texts here</span></a> then just add border-bottom and padding on the <span> - Demo

CSS underline and letter-spacing

CSS Text underlining too long when letter-spacing is applied?

http://jsfiddle.net/isherwood/JWcGh/2

.main-navigation a: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: 0.45em;
  /* 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: #fff;
  /* 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: -.40em;
}

Letters are not properly underlined

Use display: inline-block; on .resizer to bind the letter spacing to the font-size:

#smalltext {

 font-size: 1em;

}

#mediumtext {

 font-size: 1.25em;

}

#largetext {

 font-size: 1.5em;

}

.resizer {

 margin: 15px;

  display: inline-block;

}

a.resizer:hover {

 cursor: pointer;

}

.resizer-selected {

  text-decoration: underline;

 /*border-bottom: 2px solid black; */

}

<div>

  <a class="resizer resizer-selected" id="smalltext">

    <span>A</span>

  </a>

  <a class="resizer resizer-selected" id="mediumtext">

    <span>A</span>

  </a>

  <a class="resizer resizer-selected" id="largetext">

    <span>A</span>

  </a>

</div>

CSS letter-spacing together with line-through

Here is an idea where you can rely on background and box-decoration-break to create the line-through and you can easily adjust its size and position. You will basically remove one letter spacing from the total width.

It's important to note that the background need to be applied to an inline element:

p {

  letter-spacing: .5em;

  text-align:center;

}

p span {

  background:    

    linear-gradient(#000,#000) /* Coloration */

    0 calc(50% + 0.2ex) /* position */

    /

    calc(100% - .5em) 1px  /* width height */

    no-repeat;

 -webkit-box-decoration-break: clone;

  box-decoration-break: clone; 

}

<p><span>Lorem ipsum dolor sit amet, at nemore aperiri cum. Regione honestatis ei quo, ne eos aliquid mediocrem, ne viris quodsi epicuri vel. Ex dolorem atomorum dissentiunt nam, iudico minimum cotidieque eum et, has novum mnesarchum id. Libris blandit liberavisse mei in. Ius viris posidonium ei, ut quas viris albucius eum, mei eu indoctum reformidans. Et usu sumo invidunt, cu vix veri dolore propriae.</span></p>

Underline breaks with spans have padding or margin

In your case padding will add 10px space between both text so we can instead use letter-spacing with the first span to create this space.

If you refer to the specification you can read:

Underlines, overlines, and line-throughs are applied only to text
(including white space, letter spacing, and word spacing): margins,
borders, and padding are skipped

span:first-child {

  letter-spacing: 10px;

}

<a href="#">

  <span><</span>

  <span>Previous page</span>

</a>

Conflict between letter-spacing and text-align:center?

It seems that all the browser have converged on a letter-spacing implementation that is plainly at odds with what css3 says should happen.

In particular see Example XV at http://dev.w3.org/csswg/css3-text/#letter-spacing0

Browsers simply don't do this. IE has even changed its behaviour recently (IE9, I think) to be more like the other browsers, and less like the CSS3 spec as it's currently written.

The CSS3 spec in question is still at working draft status, so presumably at some point it will be changed to match what the browsers do.

You may be able to rebalance the lines by adding a padding-left value to match the letter-spacing but that may not always be possible.

space between text and underline

Either use a different font or use a border-bottom instead so that you can control the space with padding-bottom.

---

Related Topics