0

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

4

2 回答 2

2

你不能。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 也有效，第二个允许更多字符），则更灵活一些

于 2013-08-13T09:40:26.077 回答
0

您不能直接使用 PHP 执行此操作。

响应式站点不仅基于浏览器窗口的大小进行响应，它还根据页面可见时浏览器窗口大小的变化动态响应。

典型的例子是，如果平板电脑用户将他的设备从纵向转向横向；响应式网站会在他这样做时自动调整。但是对于普通的桌面用户，只需使用鼠标调整浏览器窗口的大小，就可以使用相同的效果。

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

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

在此处了解有关媒体查询以及如何使用它们的更多信息：http: //css-tricks.com/css-media-queries/

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

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

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

text-overflow: ellipsis;

这种风格增加了...在任何被截断的文本的末尾添加一个，因为它的框太小并且内容被隐藏。

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

希望有帮助。

于 2013-08-13T09:47:55.200 回答