Css如何在收缩后显示元素后缩小

时间:2018-01-29 17:38:53

标签: html css

考虑以下代码:

<h2 class="section-title">what <span>Client Say?</span></h2>

当我收缩它时会显示如下:

enter image description here

我想这样做(忽略下划线)

enter image description here

实现这一目标的最简单方法是什么?

3 个答案:

答案 0 :(得分:1)

为您的范围创建CSS规则:

h2.section-title > span {
    white-space: nowrap;
}

答案 1 :(得分:0)

您可以使用<br>标记轻松完成此操作,或将此代码放在p选择器中:

p {
  display: flex;
  flex-direction: column;
}

&#13;
&#13;
p{
  font-family: sans-serif;
  font-size: 18px;
}
span{
  font-size: 26px;
  font-weight: bold;
  text-transform: uppercase;
}
&#13;
<p>What <br><span>Client say?</span></p>
&#13;
&#13;
&#13;

答案 2 :(得分:0)

你有一个sans-serif字体,大小写在span中。 请注意,span可能最好是div,但您已经提供了标记,因此我们强制它在block显示有效的相同内容。

&#13;
&#13;
h2 {
  font-family: Helvetica, Arial, sans-serif;
  font-weight: lighter;
}

h2.section-title>span {
  white-space: nowrap;
  display: block;
  text-transform: uppercase;
  font-size:1.0em;
  font-weight: bold;
}
&#13;
<h2 class="section-title">what <span>Client Say?</span></h2>
&#13;
&#13;
&#13;