Photoshop Question posted in
The official user guide can be found here.

CSS centering text with long words – Photoshop

Is there a straightforward way to horizontally center text that works even when really long words need to stretch out into the surrounding padding?

For example, the following:

HTML

<section>
   <p>
      Some animals in the wild, like
      hummingbirds, have long names.
   </p>
</section>

CSS

section p {
   width: 75px;
   text-align: center;
   background: gold;
   padding: 20px;
   }

Results in “hummingbirds” being off-centered:

Off-centered "hummingbirds"

If the word “hummingbirds” was properly centered, it would fit nicely within the gold box.

Fiddle with it:
https://jsfiddle.net/m6h37q2z/

ADDED NOTE #1:
This question is NOT about how to remove the padding or reduce the font size or make the box bigger… those are all very easy tweaks (and would break the design). This question is about how to center the word “hummingbirds”.

ADDED NOTE #2:
For those who are saying there is not enough room, here’s a photoshopped screenshot proving that there is enough room:

enter image description here

Tags:

6

Answers


  1. Chosen as BEST ANSWER
    0

    I ended up using a simplified version of Aziz's solution (which I accepted as the answer).

    If you want something really simple (but requires manually wrapping the long overflowing words in span tags), here's the solution:

    HTML

    <section>
   <p>
      Some animals in the wild, like
      <span>hummingbirds,</span> have long names.
   </p>
</section>

    CSS

    section p {
   width: 75px;
   text-align: center;
   background: gold;
   padding: 20px;
   }
section p span {
   display: block;
   margin: 0px -20px;
   }

    Works great:
    https://jsfiddle.net/m6h37q2z/8

    Pure CSS (no Photoshop):
    Yep, it's possible


  2. 0

    You have limited the width of <p> to 75px only. But the space required for the word hummingbirds, is more than 75px, that’s why it can’t fit in there. Try increasing the width of the <p>

    section p {
   width: 75px;
   text-align: center;
   background: gold;
   padding: 20px 0;
   }
    <section>
   <p>
      Some animals in the wild, like
      hummingbirds, have long names.
   </p>
</section>
    Login or Signup to reply.
  3. 0

    You have but only so many options when it comes to this. You could change the font-size, or change the width. You could change overflow to either hidden or scroll. I am guessing though, that none of these really appeal to what you are trying to do. You could change the padding as well to compensate.

    Login or Signup to reply.
  4. 0

    I don’t think that there is a straightforward to do this but there certainly are ways.

    You can achieve this by using flexbox and wrapping some sections of your text with some <span> tags like so:

    <section>
  <p>
    <span>Some animals in the wild, like</span>
    <span>hummingbirds,</span>
    <span>have long names.</span>
  </p>
</section>

    Then you can add your styling like so:

    body {
  font-family: sans-serif;
}

section {
  width: 115px;
  background: gold;
  display: flex;
  justify-content: center;
}

section p {
  width: 75px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

    As you can see I have changed a few things. Instead of adding 20px of padding I have made the width of the parent container 40px larger. because the <section> tag is using the display: flex property with justified-content the child <p> tag will be centered in the parent <section> (the flex-direction is default row.

    Furthermore, each <span> within <p> is also center aligned (using align-items which aligns along the cross axis – the flex-direction is column.

    Here is the fiddle: https://jsfiddle.net/o0nq9pgt/

    Here is the result:

    enter image description here

    Login or Signup to reply.
  5. 0

    Well, if the box size can’t be altered, the type size can’t be altered…. to be honest I don’t know how a word sticking out of it’s container, even if it’s centered, stays in line with any design but…..

    One possible solution is to break long words…

    section p {
   width: 75px;
   text-align: center;
   background: gold;
   padding: 20px;
   word-break: break-word;
   }

    enter image description here

    Fiddle

    Grammatically it can be iffy, but visually it’ll be consistent.

    A less elegant solution may be to use a background image for the yellow (or a 1 color linear gradient) and then widen the paragraph, but position the 75px wide background centered in the (wider) paragraph.

    Solution 3….

    wrap long words in a <span> and then move the span…..

    enter image description here

    Fiddle update

    or…

    section p span { 
  display: inline-block; 
  text-align: center; 
  width: calc(100% + 20px); /* adds back padding area to inline-block */
  margin-left: -20px; /* counteracts paragraph padding offset */
  }

    Fiddle Update Here you’d just need to wrap long words in a span… then the CSS should automatically overcome the padding.

    I find this visually horrible and I’m a designer.

    To the argument that “there’s enough room”… well look above.. is there? It fits, sure, but by 1 pixel. And that’s on my browser* on my system using my monitor. No clue how it may or may not work out on other displays. Logically it should be the same as what I see, but without testing who knows. That would not be acceptable to me.

    The best, logical solution is to RETHINK THE DESIGN and either widen the box, use shorter words, or reduce the font-size.

    Login or Signup to reply.
  6. 0

    Here is another approach using negative letter-spacing and using jQuery to detect long words (more than 8 chars) and wrapping them in a special span that is centered using negative margin and display: block:

    $('section p').each(function() {
  var p = $(this);
  var text = p.text();
  var words = text.split(' ');
  p.empty();
  $.each(words, function(i, w) {
    if (this.length > 8) {
      p.append("<span>" + this + "</span>");
    } else {
      p.append(w + ' ');
    }
  });
});
    body { font-family: sans-serif; }

section p {
  width: 75px;
  text-align: center;
  background: gold;
  padding: 20px;
  letter-spacing: -0.4px;
  float: left;
  margin-right: 40px;
}

section p span {
  display: block;
  margin:0 -200px;
}
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section>
  <p>Some animals in the wild, like hummingbirds, have long names.</p>
  <p>Some animals in the wild, like oxen, have short names.</p>
  <p>Some animals in the wild, like varylawngstrung, have short names.</p>
  <p>Hellooooo my nameee isssssss whaaaaaaaaaaaaaaat</p>
</section>

    https://jsfiddle.net/azizn/bf52mwgr/

    Also, If you want ridiculously long words to be broken, you could use this code, which will break words longer than 15 characters and restore the inline display:

    $('section p').each(function() {
  var p = $(this);
  var text = p.text();
  var words = text.split(' ');
  p.empty();
  $.each(words, function(i, w) {
    if (this.length > 8 && this.length < 16) {
      p.append("<span>" + w + " </span>");
    } else if (this.length > 15) {
      p.append("<span class='break'>" + w + " </span>");
    } else {
      p.append(w + ' ');
    }
  });
});
    body { font-family: sans-serif; }

section p {
  width: 75px;
  text-align: center;
  background: gold;
  padding: 20px;
  letter-spacing: -0.4px;
  float: left;
  margin-right: 40px;
}

section p span {
  display: block;
  margin: 0 -200px;
}

section p span.break {
  display: inline;
  margin: 0;
  word-break: break-word;
}
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section>
  <p>Some animals in the wild, like hummingbirds, have long names.</p>
  <p>Some animals in the wild, like hummingbirdsss, have long names.</p>
  <p>Some insects in the wild, like Parastratiosphecomyia, have huge names.</p>
</section>

    jsFiddle: https://jsfiddle.net/azizn/8w3w2zh1/

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search