1

在这个小提琴中，你会看到像这样的 div：

http://jsfiddle.net/tickzoom/gzREg/

<div class="excerpt">
    <div class="excerpt-text">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce cursus
            scelerisque aliquet. Aenean tincidunt cursus adipiscing. Phasellus viverra
            facilisis tortor. Pellentesque interdum scelerisque eros, id auctor est
            porttitor at. Vestibulum semper lacus sed ipsum varius eu semper erat condimentum.
            </p>
    </div>
    <div class "excerpt-more">
        <p>Learn more</p>
    </div>
</div>

和这样的风格：

.excerpt {
    position: absolute;
    width: 200px;
    height: 100%;
}
.excerpt-text {
    width: 100%;
    height: 80px;
    padding: 5%;
}
.excerpt-more {
    height: 20px;
    width: 100% color: red;
}

请注意，在小提琴中，第一个 div 的lipsum 文本超出了第二个 div 中的 Learn More 文本。文本需要限制在顶部 div 内，以便在调整整个页面大小时显示更多或更少的文本，但始终显示 Learn More。

一定有一些简单的东西我遗漏或做错了，因为我有一个网站，它可以通过 WordPress 上的 Genesis 框架插件（称为 Genesis Responsive Slider）工作。他们插件的问题在于“了解更多”链接跟随文本，因此在较小的屏幕上它会消失在边界框之外。

因此计划是在插件 PHP 代码中引入第二个 div，以防止 Learn More 链接在较小的屏幕尺寸下消失。

如果您想查看有问题的临时开发站点： http: //side.tickzoom.com

4

3 回答 3

1

你的意思是这样吗？

参见 jsFiddle

.excerpt-text {
    overflow:hidden;
}

然后使文本大小变大是调整高度的另一个问题.excerpt-text。

参见 jsFiddle

.excerpt-text {
    height: 50%;
}

编辑：尝试删除以下规则

html > body .slide-excerpt-border {
    float: left;
}

你也应该html > body从这条规则中删除，所以它只是.slide-excerpt-border，开始部分是多余的。

编辑：当你修复它时，我做了这个

在此处输入图像描述

我添加了这个：

.slide-excerpt-border {
    height: 95%;
    display: block;
    overflow: hidden;
}

并将 Learn Move 锚移到下方.slide-excerpt-border

于 2013-03-08T12:39:35.740 回答
1

尝试

.excerpt{text-overflow: ellipsis;}

但是请检查它是否适用于您想要的所有浏览器，它是一个 CSS3 属性，不久前在大多数浏览器中还没有工作。

编辑：结合上面提到的溢出：隐藏可能是最好的方法。

于 2013-03-08T12:40:58.407 回答
0

您需要对不同的屏幕类型使用响应式媒体查询。

这是一个示例和说明如何使用它http://css-tricks.com/css-media-queries/

或者还有关于这个的另一个问题

使 div 内容响应

于 2013-03-08T12:43:45.680 回答