我有一个响应网站,它对某些文本块有php字符限制。限制因台式机、平板电脑还是手机而异,但我很难根据设备/大小来切换这个限制。
这是我用来限制文本的php代码:
<?php
ob_start();
the_content();
$old_content = ob_get_clean();
$new_content = strip_tags($old_content);
if(strlen($new_content) > 400) {
echo substr($new_content,0,400) . "...";
} else {
echo substr($new_content,0,400);
} ?>
如何将此限制切换到使网站响应的媒体查询?据我所知,用css是做不到的,是吗?
CSS尝试:
p.tester {
white-space: nowrap;
width: 300px;
overflow: hidden;
text-overflow: ellipsis;
min-height:300px;
}
目前,这将其限制为一行,是否可以显示5行?
您不能。PHP是服务器端的,如果没有任何帮助,服务器不知道屏幕的分辨率是多少。
你可以添加一个AJAX调用,告诉PHP屏幕的大小,并加载PHP给你的的新文本
一个更简单的方法(我不建议使用ajax)可以是:
<div id="AlwaysShowThis"> text upto 400 characters </div>
<div id="showIfMedium"> show text characters 401 till 600</div>
<div id="ShowIfbig"> show text from character 601 and up</div>
并通过css 中的媒体查询控制这些
另一种方法是text-overflow
,正如其他评论中所建议的那样(我将添加它以获得完整的答案)
elem{
text-overflow: ellipsis;
}
这将采用可用的大小,并在末尾添加点。如果你的响应非常灵敏(例如400px有效,410px也有效,第二个会允许更多的字符),那么就更灵活了
您不能直接用PHP来实现这一点。
响应网站不仅根据浏览器窗口的大小进行响应,而且在页面可见时,它还根据浏览器窗口大小的变化进行动态响应。
典型的例子是,如果平板电脑用户将设备从纵向转向横向;一个反应灵敏的网站会自动调整。但同样的效果也适用于普通桌面用户,只需用鼠标调整浏览器窗口的大小。
这不是用PHP可以完成的,因为完成后页面不会重新加载。PHP只提供初始内容,因此任何动态调整大小都需要完全由浏览器完成。
CSS媒体查询是主要的工具,它告诉浏览器根据页面大小使用不同的CSS样式。例如,您可以使用它来动态设置页面元素的宽度。您还可以使用媒体查询根据页面大小设置要显示或隐藏的某些元素;例如,在宽页面布局中,可以显示较大的文本框,而在较小的布局中,只显示包含缩减文本的框——任何CSS代码都可以包含在媒体查询中。
在此处了解有关媒体查询以及如何使用它们的更多信息:http://css-tricks.com/css-media-queries/
请注意,像IE8这样的旧浏览器不支持媒体查询,所以如果您使用它们,最好设置合理的默认值。
或者,在许多情况下,简单的基于百分比的大小调整也可以工作,您甚至可能不需要媒体查询。
CSS也可以在没有任何PHP干预的情况下实现...
效果:
text-overflow: ellipsis;
这种样式会在任何因框太小而被截断的文本的末尾添加一个...
,并且内容是隐藏的。
为了使用省略号,还需要指定overflow:hidden
和white-space: nowrap
。
希望能有所帮助。