CSS span 标签上的转换元素（连同显示：内联块）强制换行

Question

我的 Google 字体的斜体非常微妙，所以我尝试使用 CSS transform: skew 元素添加额外的倾斜度。我将文本包裹在一个跨度中，但为了让转换属性起作用，我还使用了 display: inline-block。但是，在列表项中使用此方法时，它会强制将一半的列表项放到新的一行中。有谁知道如何防止这种情况？

强制换行的列表项截图：

.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

实现此效果的一种方法是使用 javascript 将 <span class="slant"> 应用于原始 <span class="slant"> 中的 每个单独的字符 （在下面的工作示例中，我已将其重命名为 <em class="title">).

这可以防止您的 inline-block 变得太宽以至于参考书目条目的其余部分只能从新的一行开始。

工作示例：

// 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>

CSS span 标签上的转换元素（连同显示：内联块）强制换行

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

html

css

css-transforms