Question

Hiall，

我正在使用wordpress并显示专题文章的主标题标题。

<span class="mytitle">
<?php the_title(); ?>
</span>

现在如果标题标题长度为30个字符，则它完全符合1行，但如果标题的长度为32个字符，那么它会溢出到2行，并且我看起来有一个难看的标题，因为存在所有这些不需要的空间

有没有告诉css中的标题标题保持在1行并自动缩小自己的字体大小以适应那一行等???

我知道我可以使用 CSS

white-space: nowrap;

阻止换行到下一行，但是字体大小呢，无论如何根据它所在的容器自动缩小它的大小？

任何帮助都会很棒

Answer 1

在我看来，最好的选择是为标题长度设置2个css类和一个简单的if语句：

$string = the_title(); $length = strlen( utf8_decode( $string ) );

if ($length > 30) { echo '<span class="larger">' . the_title() . '</span>'; } else { echo '<span class="smaller">' . the_title() . '</span>'; }

Answer 2

您可以使用媒体查询根据屏幕大小更改文本大小。

示例css：

 @media screen and (max-width:1024px) {
       .mytitle{
           font-size:28px;
        }
 }

你可以在最大宽度中放置你想要的任何像素数量：＆lt; - 你希望触发这种风格的屏幕尺寸。

你可以复制粘贴相同的代码，并以480px的移动宽度使用它，并将字体大小更改为24px，因此它可以使用不同的屏幕大小。

Answer 3

您可以通过多种方式使用JavaScript实现此目的。这是一个简单的即插即用解决方案。请注意，它要求您的容器具有高度：

function adjustHeights(elem) {
      var fontstep = 2;
      if ($(elem).height()>$(elem).parent().height() || $(elem).width()>$(elem).parent().width()) {
        $(elem).css('font-size',(($(elem).css('font-size').substr(0,2)-fontstep)) + 'px').css('line-height',(($(elem).css('font-size').substr(0,2))) + 'px');
        adjustHeights(elem);
      }
    }

adjustHeights('h1');

#container {
  width: 300px;
  height: 30px;
  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
  <h1>Some text that normally flows more than one line</h1>
</div>

来源：Meta Toad

Answer 4

function adjustHeights(elem) {
      var fontstep = 2;
      if ($(elem).height()>$(elem).parent().height() || $(elem).width()>$(elem).parent().width()) {
        $(elem).css('font-size',(($(elem).css('font-size').substr(0,2)-fontstep)) + 'px').css('line-height',(($(elem).css('font-size').substr(0,2))) + 'px');
        adjustHeights(elem);
      }
    }

adjustHeights('h1');

#container {
  width: 300px;
  height: 30px;
  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
  <h1>Some text that normally flows more than one line</h1>
</div>

列表项

获取标题以根据容器大小自动减小字体大小以适合1行

4 个答案: