更新

Question

我正在建立一个电子商务网站。所有产品都以不同的div显示。我有一个问题：在每个产品的Div中，我想显示产品描述的一部分。当产品描述比div长时，它只是在div的边缘显示描述。我试图将问题放在一张图片中： enter image description here

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

我想限制文字以适应div。
我想确保在单词中间某处没有这样做
我想添加一个＆＃34;阅读更多＆＃34;链接在说明预览的最后。

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

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

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>';
}

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

更新

答案引导我进行＆＃34; Line Clamping＆＃34;，这似乎是执行我需要的任务的css或javascript代码。实现musically_ut提供的javascript代码和Unamata Sanatarai提供的css带给我： enter image description here

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

由于某种原因，文字夹紧文字在我的产品卡的页脚下面穿过
有时会打断一个字。（它是荷兰语。应该存在的词是＆＃34; beschikt＆＃34;。）

欢迎任何建议

PS：第二个截图是使用css实现的，因为javascript实现仅适用于一个产品（可能是因为产品卡是由php生成的div＆＃39; for＆＃39; loop）

Answer 1

你想要的是多线夹紧。不幸的是，到目前为止CSS只允许钳制第一行文本。 Webkit / Opera允许夹紧多行，但我怀疑它对你没什么帮助。

此处描述了几种解决方法（甚至一个which is all-CSS）：http://css-tricks.com/line-clampin/

然而，最可靠的似乎是使用javascript执行任务：Clamp.js。

Answer 2

使用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/

Answer 3

检查Fiddle我自己创建了：

小提琴中的剧本根据屏幕尺寸在限制区域/溢出设置（隐藏）div的右下角准确设置了解更多链接。点击知道更多切换溢出内容的可见性。

<强>的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>

上面的结构应该用于小提琴中使用的插件。你可以使用你想要的类名。在上面的HTML wrappingText 是包含text的div。它必须是包含在另一个div中，上面的HTML wrappingText 包含在div中，类名为 wrapper 。

要使用该插件，您只需使用包含text的div类名调用该插件，并将main parent classname作为参数传递：

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

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

如何使文字响应div大小？

3 个答案:

检查Fiddle我自己创建了：

更新

Updated Fiddle