span 标签上的 CSS Transform 元素（连同 display: inline-block）正在强制换行答案

【问题标题】：CSS Transform element on span tag (along with display: inline-block) is forcing a line breakspan 标签上的 CSS Transform 元素（连同 display: inline-block）正在强制换行
【发布时间】：2020-07-23 08:21:58
【问题描述】：

我的 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>

【问题讨论】：

我倾向于避免使用斜体标签，因为它没有语义，不会在屏幕阅读器中显示，并且会导致 WCAG 错误。我只是为了好玩而尝试它，它仍然存在与 span 和 em 标签相同的问题。不过，感谢您的意见。
尝试使用：word-break: break-all;
@AlyJ i 标签工作正常：jsfiddle.net/mhb7ow8k
为什么不直接使用font-style: italic;？

标签： html css css-transforms

【解决方案1】：

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

这可以防止您的 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>

【讨论】：