自动减小长词的字体大小

时间:2012-06-17 作者:jfudem

我正在一个电子商务网站上工作,在这个网站上,帖子和产品标题需要以相当窄的分区显示。我想为自然适合所提供空间的单词设置特定的字体大小,同时指示太长的单词,使父对象的宽度无法自动缩小,从而避免了连字符的需要。似乎以前一定有人想到过这样做的方法,但我在网上找不到任何解决方案。我找到的最接近答案是BigText jQuery plugin, 但这确实是为你可以预测自己的换行情况而设计的。由于我的标题将被Wordpress查询并全部插入到divs中,这个插件将缩小我的文本,直到每个单词都能放在一行中,这不是我想要的。如果你有任何建议,请告诉我。非常感谢您的宝贵时间!最好的,乔纳森

1 个回复
最合适的回答,由SO网友:Geert 整理而成

我也做过类似的事情,采用简单的方法,根据标题的字符数向标题添加CSS类。然后该CSS类减少letter-spacing 和/或font-size.

// Count the characters, taking Unicode into account
$chars = mb_strlen($post->post_title);

// For every 10 characters after the first 20, add a size
$size = max(0, ceil(($chars - 20) / 10));

// Generate the CSS class: x-long, xx-long, etc.
$class = ($size) ? str_repeat(\'x\', $size).\'-long\' : \'\';

// Output
echo \'<h1 class="\'.$class.\'">\'.esc_html($post->post_title).\'</h1>\';
不过,这种方法相当幼稚。它不考虑字体呈现的实际字符宽度。为此,您需要一种JavaScript方法。

结束

相关推荐

Load jQuery only on home page

我在一个高级wordpress主题中工作。。。这是一个复杂的wordpress主题,有很多管理功能,所以我觉得很难编辑。。。现在我只需要在主页中向上移动一个侧边栏。。。我使用此代码。。。.classname{ position:relative; top:-300; } 但是上面的代码正在移动所有页面上的提要栏。。。由于该网站很复杂,我不知道在主页的侧边栏中添加特定的类名。。。所以我决定使用jQuery来查找页面是否为主页。。。如果是主页,那么我将侧边栏向上移动,