CSS centering text with long words

Question

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:

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:

Answer 1

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/