切换响应媒体查询的php字符限制


Switching php character limit for responsive media queries

我有一个响应网站,它对某些文本块有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:hiddenwhite-space: nowrap

希望能有所帮助。