Unwanted Text Wrapping in HTML

Question

I am new to HTML and CSS. It seems that text in HTML determines its own width, regardless of what I make the container. This causes the text to wrap when there is still ample space for it to fit on one line. How would one go about "anchoring" the text to one line?

I have tried setting all of the parent element's widths manually to be wider than the text, but the text continues to calculate its own width independently.

I have tried using white-space: nowrap, but what that does is the width of the text continues to be calculate the same as before (as if there was text wrapping), so the text overflow is off center because the text starts where it would have if there had been if there was a text wrap going on.

HTML:

<div class="title-wraper" style="

">
  <a><div class="title">A WITCH SCORNED</div></a>
</div>

<div class="title-wraper" style="
    white-space: nowrap;
">
  <a><div class="title">A WITCH SCORNED</div></a>
</div>

CSS:

.title {
    font-family:Baskerville, 'Times New Roman', Times, serif;
    font-size: 60px;
    transform: scale(.5,1);
    line-height: 45px;
  text-align: center;
  margin-right: auto;
  margin-left: auto;
}

Here is a replication of my problem: https://jsfiddle.net/qb6fopdx/9/ The problem is not apparent until you make the result window narrow.

image demonstrating the issue

Answer 1

The transform: scale() is what's causing this problem -- you're using it to change the shape of the letters, but it also changes the shape of the container.

You can override that by making the container twice as wide as it normally would be, so the scale transform will bring it back down to 100%. You'll also need to set the transform-origin to get the positioning to come out correctly:

.title {
  font-family: Baskerville, 'Times New Roman', Times, serif;
  font-size: 90px; /* made it bigger so the difference is visible in a snippet */
  text-align: center;
}

.title-wrapper {
  transform: scale(0.5, 1); 
  white-space: nowrap;
  border: 1px solid; /* so you can see what's going on */
}

.title-wrapper.corrected {
  transform-origin: 0 0;
  width: 200%; 
}

<div class="title-wrapper">
  <a>
    <div class="title">A WITCH SCORNED</div>
  </a>
</div>
<div class="title-wrapper corrected">
  <a>
    <div class="title">A WITCH SCORNED</div>
  </a>
</div>