Как сделать текст чувствительным к размеру div?

Я создаю сайт электронной коммерции. Все продукты отображаются в отдельных div. У меня есть одна проблема: в каждом продукте Div я хочу отобразить часть описания продукта. Когда описание продукта длиннее, чем div, оно просто отображает описание по краям div. Я попытался поставить проблему на картинке: enter image description here

Теперь, как вы можете видеть на картинке, я хотел бы решить три проблемы:

  • Я хочу ограничить текст, чтобы он соответствовал 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, которые выполняют нужную мне задачу. Реализация кода javascript, предоставленного musically_ut и css из Unamata Sanatarai, приводит меня к этому: enter image description here

Я могу сказать, что прогресс был достигнут, поскольку текст не просто пересекает границы моего div. У меня осталось только две проблемы:

  • Текст с зажатым текстом по какой-то причине работает под нижним колонтитулом моей карточной карты
  • Иногда это прерывает слово. (это голландское слово, которое должно быть там "beschikt".)

любые предложения приветствуются

PS: второй снимок экрана был сделан с реализацией css, поскольку реализация javascript работала только над одним продуктом (возможно, потому, что карты продуктов - это divs, генерируемые петлей php для цикла)

ОТВЕТЫ

Ответ 2

То, что вы хотите, - это многократное нажатие. К сожалению, CSS пока только позволяет зажимать первую строку текста. Webkit/Opera позволяет зажимать несколько строк, но я подозреваю, что здесь вам не поможет.

Существует несколько обходных решений (даже один который является все-CSS): http://css-tricks.com/line-clampin/

Самый надежный, однако, похоже, использует javascript для задачи: Clamp.js.

Ответ 3

Проверьте Fiddle Я создал себя:

script в скрипте устанавливает ссылку Знать больше точно в правом нижнем углу набора ограниченной области/переполнения (скрытого) в соответствии с размером экрана. Нажав кнопку Знать больше просматривается видимость переполненного содержимого.

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 находится div, содержащий текст. Он должен быть завернутый в другой div, в приведенном выше HTML wrappingText завернут в div с именем класса wrapper.

Для использования плагина вам просто нужно вызвать плагин с именем класса div, содержащим текст, и передать основной родительский класс name как параметр:

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

Другие инструкции и сведения добавляются в комментарии в обновленной скрипке ниже:

Обновлено Fiddle