CSS Transform element on span tag (along with display: inline-block) is forcing a line break

My Google font's italic face is really subtle so I'm trying to add additional slant using the CSS transform: skew element. I have the text wrapped in a span, but in order to allow the transform property to work, I'm also using display: inline-block. However, when using this method within a list item, it forces half the list item down onto a new line. Does anyone know how to prevent this?

Screenshot of list item with forced line break:

.slant {
  transform: skew(-8deg);
  display: inline-block;
}

<ul>
  <li>Ripley, John W. (Ed.).1975. <span class="slant">Those Dreadful Devil Wagons: Shawnee County’s Automobile Owners, Dealers and Manufacturers</span>, 1902-1912 (Shawnee County Historical Society Bulletin No. 49).</li>
  <li>Boyd, John/Toronto Star [Photographer]. (1900). Cars; trucks and horse-drawn wagons competed for space at fruit and vegetable whole. [Photograph], Retrieved May 6, 2020, from: <a href="https://www.gettyimages.com/detail/news-photo/cars-trucks-and-horse-drawn-wagons-competed-for-space-at-news-photo/502831383"
      target="_blank">https://www.gettyimages.com/detail/news-photo/cars-trucks-and-horse-drawn-wagons-competed-for-space-at-news-photo/502831383</a></li>
  <li>Daily Herald [Photographer]. Hospital X-ray, 1932 [Photograph], Retrieved May 6, 2020, from: <a href="https://www.gettyimages.com/detail/news-photo/hospital-x-ray-1932-a-photograph-of-staff-taking-an-x-ray-news-photo/102730396" target="_blank">https://www.gettyimages.com/detail/news-photo/hospital-x-ray-1932-a-photograph-of-staff-taking-an-x-ray-news-photo/102730396</a></li>
</ul>

Solution

One approach to achieve this effect is to use javascript to apply a <span class="slant"> to every individual character in your original <span class="slant"> (which, in the working example below, I have renamed <em class="title">).

This prevents your inline-block becoming so wide that the rest of the bibliography entry can only follow it by starting on a new line.

Working Example:

// GRAB EACH BOOK TITLE IN THE BIBLIOGRAPHY
const bookTitles = [... document.getElementsByClassName('title')];

// LOOP THROUGH THE BOOK TITLES
for (bookTitle of bookTitles) {

  // GRAB THE TEXT OF THE BOOK TITLE
  let bookTitleText = bookTitle.textContent;

  // TEMPORARILY REPLACE THE SPACES
  bookTitleText = bookTitleText.replace(/\s/g, '+')

  // BUILD AN ARRAY OF CHARACTERS FROM THE BOOK TITLE
  let bookTitleTextArray = bookTitleText.split('');

  // TRANSFORM EACH CHARACTER INTO A <span class="slant">
  bookTitleHTML = '<span class="slant">' + bookTitleTextArray.join('</span><span class="slant">') + '</span>';

  // REINTRODUCE THE SPACES
  bookTitleHTML = bookTitleHTML.replace(/<span class="slant">\+<\/span>/g, ' ');

  // INSERT THE NEW HTML INTO THE BOOK TITLE
  bookTitle.innerHTML = bookTitleHTML;
}

.slant {
  display: inline-block;
  transform: skew(-18deg); 
}

<ul>
  <li>Ripley, John W. (Ed.).1975. <em class="title">Those Dreadful Devil Wagons: Shawnee County’s Automobile Owners, Dealers and Manufacturers</em>, 1902-1912 (Shawnee County Historical Society Bulletin No. 49).</li>
  <li>Boyd, John/Toronto Star [Photographer]. (1900). Cars; trucks and horse-drawn wagons competed for space at fruit and vegetable whole. [Photograph], Retrieved May 6, 2020, from: <a href="https://www.gettyimages.com/detail/news-photo/cars-trucks-and-horse-drawn-wagons-competed-for-space-at-news-photo/502831383"
      target="_blank">https://www.gettyimages.com/detail/news-photo/cars-trucks-and-horse-drawn-wagons-competed-for-space-at-news-photo/502831383</a></li>
  <li>Daily Herald [Photographer]. Hospital X-ray, 1932 [Photograph], Retrieved May 6, 2020, from: <a href="https://www.gettyimages.com/detail/news-photo/hospital-x-ray-1932-a-photograph-of-staff-taking-an-x-ray-news-photo/102730396" target="_blank">https://www.gettyimages.com/detail/news-photo/hospital-x-ray-1932-a-photograph-of-staff-taking-an-x-ray-news-photo/102730396</a></li>
</ul>