将文本块折叠为特定行数

时间:2015-08-18 09:07:10

标签: javascript css

我已经实现了一个来自http://jedfoster.com/Readmore.js/的名为readmore.js的js插件,我可以使用它来折叠大量文本,如http://gordonsbay.hashfff.com/accommodation/beachfront-apartment-overlooking-the-bay/所示

我想只在块折叠时显示前10行文本。行高设置为1.3。我认为将块设置为13em(1.3 * 10)可以解决问题,但不幸的是因为它将最后一行切成两半。

我没有找人帮助我以正确的方式解决这个问题。

HTML

<section class="accomm-info" data-readmore="" aria-expanded="false" id="rmjs-1" style="max-height: none; height: 240px;">
        <div class="container">
            <div class="row">
                <div class="col-8">
                    <p><strong>Minimum stay 3&nbsp;nights</strong></p>
                    <p>This lovely ground floor self catering apartment or similar has magnificent uninterrupted views looking across False Bay, with Table Mountain in the distance.&nbsp;The apartment block is situated in the heart of the old village across the road from the beach.&nbsp;It is within walking distance of restaurants, shops &nbsp;and pubs.</p>
                    <p>1 x queen bed,&nbsp;2 x &nbsp;single beds. 1 x double sleeper couch</p>
                    <p>Main en suite – bath and toilet</p>
                    <p>2nd bathroom – shower and toilet</p>
                    <p>There is a built in braai on the ground level overlooking the sea.</p>
                    <p>Wi-fi is for your own account.</p>
                    <p>Exit fee of R200.00</p>
                     p>* Accommodation</p>
                </div>
            </div>
        </div>
    </section>

CSS

.accomm-info {
  max-height: none;
  height: 240px;
}

0 个答案:

没有答案