Question

我有一个响应式网站，对某些文本块有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行？

Answer 1

你做不到。 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也可以工作，第二个可以允许更多字符），则会更加灵活。

Answer 2

您无法直接使用PHP执行此操作。

响应式网站不仅会根据浏览器窗口的大小做出响应，还会根据浏览器窗口大小的变化动态响应，同时页面可见。

典型的例子是平板电脑用户将设备从纵向转向横向;响应式网站会自动调整。但是，普通桌面用户只需使用鼠标调整浏览器窗口大小即可使用相同的效果。

这不是可以用PHP完成的事情，因为完成此操作后页面不会重新加载。 PHP仅提供初始内容，因此任何动态调整大小都需要完全由浏览器完成。

CSS媒体查询是此主要工具，它告诉浏览器根据页面大小使用不同的CSS样式。例如，您可以使用它来动态设置页面元素的宽度。您还可以使用媒体查询根据页面大小设置要显示或隐藏的某些元素;例如，在宽页面布局上，您可以显示较大的文本框，并且在较小的布局上，仅显示包含缩小文本的框 - 任何CSS代码都可以包含在媒体查询中。

详细了解媒体查询以及如何在此处使用它们：http://css-tricks.com/css-media-queries/

请注意，旧版浏览器（如IE8）不支持媒体查询，因此如果您使用它们，最好设置合理的默认值。

或者，简单的基于百分比的大小调整在许多情况下也可以使用，您甚至可能不需要媒体查询。

CSS也可以在没有PHP干预的情况下完成...效果：

text-overflow: ellipsis;

此样式会在截断的任何文本的末尾添加...，因为其框太小而内容已隐藏。

为了使省略号起作用，您还需要指定overflow:hidden和white-space: nowrap。

希望有所帮助。

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

2 个答案: