强制不要对伪元素 (:after） 使用换行符

Force no line-break on pseudo element (:after)

本文关键字：after 换行符 元素      更新时间：2023-09-26

http://codepen.io/ethanclevenger91/pen/vNjOyP

编辑：此代码笔现在展示了各种建议的解决方案

如果您调整此笔中的可用空间的大小，您将看到在顶部标题中，您最终会到达菱形(通过伪元素创建(将换行的点，但最后一个单词不会，因此伪元素位于其自己的行上。

我想使用纯CSS来设计一个解决方案，其行为类似于第二个标题，如果伪元素中断，最后一个单词就会中断。目前我已经通过Javascript实现了它，因为标题的内容将来自数据库。

.HTML：

<div class="container">
<h1 class="alpha">A heading that takes up nearly the entire width</h1>
<h1 class="alpha solution1">A solution that would require Javascript</h1>
</div>

SCSS：

$brand-primary:lightblue;
$brand-secondary:darken(lightblue, 40%);
@mixin hidpi($ratio) {
  @media (-webkit-min-device-pixel-ratio: $ratio), (min-resolution: #{round($ratio*96)}dpi) {
      @content;
  }
}
body {
  position:relative;
  height:100vh;
  background:$brand-primary;
  width:100%;
}
.container {
  top:50%;
  transform:translateY(-50%);
  position:relative;
}
.alpha {
  text-align:center;
  color:$brand-secondary;
  &:not(.solution1) {
    &:after {
      content:'';
      @extend %diamond;
      margin-left:11px;
    }
  }
  &.solution1 {
    .diamond {
      @extend %diamond;
      margin-left:11px;
    }
  }
}
%diamond {
  width:13px;
  height:14px;
  display:inline-block;
  transform:rotate(-45deg);
  border:1px solid $brand-secondary;
  vertical-align:middle;
  @include hidpi(2) {
    height:13px;
  }
}

.JS：

jQuery(document).ready(function($) {
  var content = $('.solution1').html();
  var lastChar = content.slice(-1);
  $('.solution1').html(content.slice(0, -1)+'<span style="white-space:nowrap">'+lastChar+'<span class="diamond"></span></span>');
});
您也可以

使用 UTF8 中的标准菱形：◇ 。

如果你让你的:after display: inline它不会中断，因为你没有在最后一个单词和它之间添加任何空格。

.alpha.solution3:after {
  display: inline;
  content: "◇";
  font-weight: normal;
  font-size: 1.2em;
}
<h1 class="alpha solution3">A solution that does not require Javascript neither a SPAN</h1>

如果这个字符对你来说太大胆了，你可以制作自己的字体，使用font-face并使用它。

http://codepen.io/anon/pen/BoxjzO

这也适用于不支持transform的浏览器。

您可以尝试使用 white-space 来防止h1中的换行符，并将文本换行到恢复正常行为的 span 元素中。

h1 {
  white-space: nowrap;
}
h1 > span {
  white-space: normal;
}

此外，Chrome 还需要

h1 > span::after {
  content: '';
  white-space: nowrap;
}


body {
  position: relative;
  height: 100vh;
  background: lightblue;
  width: 100%;
}
.container {
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  position: relative;
}
.alpha {
  text-align: center;
  color: #2e7e99;
}
.alpha:after {
  content: '';
  width: 13px;
  height: 14px;
  display: inline-block;
  -webkit-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  transform: rotate(-45deg);
  border: 1px solid #2e7e99;
  vertical-align: middle;
  margin-left: 11px;
}
h1 {
  white-space: nowrap;
}
h1 > span {
  white-space: normal;
}
h1 > span::after {
  content: '';
  white-space: nowrap;
}
<div class="container">
  <div class="row">
    <div class="col-xs-12">
      <h1 class="alpha">
        <span>A heading with a decorative pseudo-element that breaks by itself</span>
      </h1>
    </div>
  </div>
</div>

相关文章：