如何使文字响应div大小？

Question

我正在建立一个电子商务网站.所有产品都以不同的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>';
}

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

UPDATE

答案引导我进行"Line Clamping",它似乎是执行我需要的任务的css或javascript代码.实现musically_ut提供的javascript代码和Unamata Sanatarai提供的css带给我:

我可以说已经取得了进展,因为文本并不仅仅跨越了我的div的边界.我只剩下2个问题了:

• 由于某种原因文本夹紧文本贯穿我的产品卡的页脚下面
• 它有时会打断一个字.(它是荷兰语.应该存在的词是"beschikt".)

欢迎任何建议

PS:第二个截图是使用css实现的,因为javascript实现只适用于一个产品(可能是因为产品卡是由''循环'生成的div'

Answer 1

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

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

然而,最可靠的似乎是使用javascript执行任务:Clamp.js.

Answer 2

使用CSS文本溢出和线条夹紧:

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/