14

我正在建立一个电子商务网站。所有产品都显示在单独的 div 中。我有一个问题：在每个产品的Div中，我想显示产品描述的一部分。当产品描述比 div 长时，它只是在 div 的边缘显示描述。我试图将问题放在图片中： 在此处输入图像描述

现在，如图所示，我想解决三个问题：

  • 我想限制文本以适应 div。
  • 我想确保这不是在单词中间的某个地方完成的
  • 我想在描述预览的末尾添加一个“阅读更多”链接。

现在我在其他电子商务网站上看到了很多，但是在找了几个小时后，我还没有找到关于如何做到这一点的明确描述。

这是生成所有产品卡的代码：

for($i = 0; $i<$numberOfItems; $i++) {
    //echo $output_array[$i]["itemName"];
    echo '<a href="/itemDetails.php?itemCode=';echo $output_array[$i]["itemCode"]; echo '&itemName='; echo $output_array[$i]["itemName"];echo'">
    <div id="item" style="background-color: transparent; width:243px;height:auto;float:left; margin-left:20px; margin-top:20px; max-width:800px; display:inline-block;">
    <div id="itemPicture" class="itemImage"; > 
    <div id="price" class="pricetag">
    <div id="priceText" class="priceText";>';
    echo "€".$output_array[$i]["itemPrice"];

    echo '</div></div>';
    $imageSource = "http://www.imagine-app.nl/ProductImages/".$output_array[$i]["firstImage"].".jpg";
    echo '<img src="';echo $imageSource; echo'" style="max-width:100%; border:0px;"> 

    </div>

    <div id="itemName" class="itemName"">';
        echo $output_array[$i]["itemName"];
    echo '</div>'; ?>

    <div id="itemDescription" class="itemDescription" style="height:">
    <?  echo $output_array[$i]["itemDescription"];
    echo '</div>';
    ?>

    <?php
    echo '<div id="itemComment" class="itemComment"">
          Lees verder! 
    </div>

</div></a>';
}

有谁知道如何解决这些问题？任何帮助将非常感激。提前致谢！

更新

答案让我想到了“Line Clamping”，它似乎是执行我需要的任务的 css 或 javascript 代码。实现由 musicly_ut 提供的 javascript 代码和来自 Unamata Sanatarai 的 css 让我想到了这一点： 在此处输入图像描述

我可以说已经取得了进展，因为文本不仅超出了我的 div 的边界。我只剩下两个问题：

  • 由于某种原因，文本夹在我的产品卡的页脚下方
  • 它有时会打断一个词。（它是荷兰语。应该是“beschikt”。）

欢迎任何建议

PS：第二张截图是用 css 实现的，因为 javascript 实现只适用于一种产品（可能是因为产品卡是由 php 'for' 循环生成的 div）

4

3 回答 3

9

你想要的是多线钳位。不幸的是，到目前为止，CSS 只允许夹住第一行文本。Webkit/Opera 允许夹住多行，但我怀疑它在这里对你没有多大帮助。

这里描述了几种解决方法（甚至一种是全 CSS）：http: //css-tricks.com/line-clampin/

然而，最可靠的方法似乎是使用 javascript 来完成任务：Clamp.js。

于 2014-04-13T11:53:24.067 回答
6

使用CSS text-overflow和Line Clamping：

div {
  display: block; 
  display: -webkit-box;
  width: 200px;
  height: 40px;
  margin: 0 auto;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  padding:20px;
  overflow:hidden;
  text-overflow: ellipsis;
}

现场示例：http: //jsfiddle.net/5Z4Wu/

于 2014-04-13T11:46:57.563 回答
2

检查我自己创建的这个小提琴：

小提琴中的脚本根据屏幕大小在有限区域/溢出集（隐藏）div 的右下角设置Know More链接。单击Know More时，溢出内容的可见性被切换。

jQuery

/*Only change required in this script if id name of div containing text is different*/
var txtCont = $('#wrappingText');
/*******************************/
var lines = txtCont.get(0).getClientRects();
txtCont.css('display','inline-block');

jQuery.fn.exists = function(){return this.length>0;}

function debugTxt(txt)
{
    var lineHeight = txtCont.css('line-height').replace("px", '');
    var txtContHeight = txtCont.height();
    txtCont.parent().height(lineHeight*Math.floor(txtContHeight/lineHeight));
    if (txt*lineHeight>txtContHeight){
       if(!txtCont.parent().find('.knowMore').exists()){
       txtCont.parent().append('<div class="knowMore">Know </div>');
    }}
    else
       txtCont.parent().find('.knowMore').remove();
}
debugTxt(lines.length);

$('.knowMore').click(function(){
    $(this).prev().toggleClass("visible");
    $(this).toggleClass('knowLess');
    $(this).parent().toggleClass("parentClick");
});

获得正确的输出需要使用适当的 CSS。下面是小提琴中使用的CSS ：

#wrapper{
    position:relative;
}
html,body,#wrapper,#wrappingText{
    margin:0px;
    padding:0px;
    width:100%;
    height:100%;
}
#wrappingText{
    display:inline;
    overflow:hidden;
}
.knowMore{
    position:absolute;
    bottom:0px;
    right:0px;
    background-color:white;
    color:blue;
    cursor:pointer;
}
.knowMore:before{
    content:"...";
}
.knowMore:after{
    content:"More";
}
.knowLess:before{
    content:"";
}
.knowLess:after{
    content:"Less";
}

.visible{
    overflow:visible !important;
}

.parentClick{
    width:auto !important;
    height:auto !important;
}

更新

<div class="container">
.
.
.
<div class="wrapper">
<div class="wrappingText"></div>
</div>
.
.
.
</div>

fiddle使用的插件应该使用上面的结构。你可以使用你想要的类名。上面的HTML wrappingText是包含文本的div。它必须包裹在另一个div中，在上面的HTML wrappingText用类名wrapper包裹在 div 中。

要使用插件，您只需使用包含文本的 div 的类名调用插件，并将主父类名作为参数传递：

$('.wrappingText').knowMoreLess('.container'); // CALLING PLUGIN

其他说明和详细信息在下面更新的小提琴的评论中添加：

更新小提琴

于 2014-04-13T21:09:09.650 回答