How to center align an overflowing element in CSS

Question

I have a box with text-align: center, with a max-width: 420px. Inside the box there is a h1 with a very long word. (See the code example)

The Problem: The overflowing word is now left aligned. I know, there is word-wrap for this, but I dont want to cut the text, it has to be on the same line. The width of the box is also fixed and can not be more.

My question: Is it possible to center align the big overflowing word?

.titles {
  text-align: center;
  padding: 3rem 0;
  margin: 0 auto;
  max-width: 420px;
  background: lightgrey;
}

h1 {
  font-size: 2.9rem;
  margin: 0 0 1.9rem;
  color: #3d78c7;
  font-weight: 700;
  line-height: 1.2;
}

<div class="titles">
  <h1>Allgemeine Geschäftsbedingungen</h1>
</div>

So to be clear, you want it to overflow the grey box on both ends? — TylerH, Oct 09 '18 at 16:42

score 2 · Accepted Answer · answered Oct 09 '18 at 16:46

^{I will answer this for now, but I think it may be a duplicate. If one is found, I will delete the answer.}

You can do this by making the <h1> element a flex item and using justify-content: center; on it.

.titles {
  text-align: center;
  padding: 3rem 0;
  margin: 0 auto;
  max-width: 420px;
  background: lightgrey;
}

h1 {
  font-size: 2.9rem;
  margin: 0 0 1.9rem;
  color: #3d78c7;
  font-weight: 700;
  line-height: 1.2;
  display: flex;
  justify-content: center;
}

<div class="titles">
  <h1>Allgemeine Geschäftsbedingungen</h1>
</div>

Thank you very much! This is so dead simple but I would not have guessed :D If this is a duplicate, I will delete the question. I saw a similar question but with another goal. So I asked my own. — Fabian, Oct 09 '18 at 16:50

passatgt · Answer 2 · 2018-10-09T17:00:32.890

1

The easiest way to do this is to add negative left and right margin to your title. Its not ideal, because it can mess up your other content and also might not work with really long words:

.titles {
  text-align: center;
  padding: 3rem 0;
  margin: 0 auto;
  max-width: 420px;
  background: lightgrey;
}

h1 {
  font-size: 2.9rem;
  margin: 0 -10% 1.9rem;
  color: #3d78c7;
  font-weight: 700;
  line-height: 1.2;
  background: rgba(0,0,0,0.2)
}

<div class="titles">
  <h1>Allgemeine Geschäftsbedingungen</h1>
</div>

Another solution is to hyphenate the words inside the container. Browser support is pretty great: https://caniuse.com/#feat=css-hyphens

.titles {
  text-align: center;
  padding: 3rem 0;
  margin: 0 auto;
  max-width: 420px;
  background: lightgrey;
}

h1 {
  font-size: 2.9rem;
  margin: 0 0 1.9rem;
  color: #3d78c7;
  font-weight: 700;
  line-height: 1.2;
  background: rgba(0,0,0,0.2);
  -webkit-hyphens: auto;
  -moz-hyphens: auto;
  -ms-hyphens: auto;
  hyphens: auto;
}

<div class="titles">
  <h1 lang="de">Allgemeine Geschäftsbedingungen</h1>
</div>

edited Oct 09 '18 at 17:00

answered Oct 09 '18 at 16:49

passatgt

4,234
4
40
54

1

The hyphens demo does not work, at least not in Firefox. – TylerH Oct 09 '18 at 16:53
First solution works, but the problem is that there are many titles in this box (bcs its the hero and on every page the title is different). And its in wordpress, so I dont know what titles will there be in the future. Second solution doesnt work on my browser (Chrome 69, Win 10) – Fabian Oct 09 '18 at 16:55
@TylerH Thanks, fixed. – passatgt Oct 09 '18 at 17:01
Yes, as you can see on caniuse, its not supported yet on Windows Chrome. Works fine on Mac though. – passatgt Oct 09 '18 at 17:01
@passatgt Yeah, so it's no real solution for me. I want the page to minimum support the current browsers -1 version. – Fabian Oct 09 '18 at 17:05
Got it. This answer is here to the future :) – passatgt Oct 09 '18 at 17:11

How to center align an overflowing element in CSS

2 Answers2