跨度标记上的 CSS 变换元素（连同显示：内联块）正在强制换行

Question

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>

Answer 1

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>