Question

我在div中显示一些内容时遇到问题。我有一些文本考虑10行内容，我必须在div中显示。我想以这样的方式设计，最初div只会显示2行内容，＆amp;有一个链接“阅读完成”。＆安培;当我点击该链接时，必须显示整个内容。链接必须更改为“隐藏”。＆安培;如果我再次点击隐藏链接，则必须再次显示2行内容。

请帮我解决这个问题。

更新：当内容为两行@内容结尾时，它必须显示3个点（...）

Answer 1

我希望这会对你有所帮助

<div id="mydiv">
Please read the documentation.
For updates please follow our blog, tweets or become a fan.
    <span><a href="#" id="more" onclick="full_view(this.id)">more</a></span>
<span style="display:none;" id="disMore"><p>Please read the documentation.    
For updates please follow our blog, tweets or become a fan.Please read the documentation.
For updates please follow our blog, tweets or become a fan.Please read the documentation.
For updates please follow our blog, tweets or become a fan.</p></span>
<span><a href="#" id="hide" onclick="half_view(this.id)" style="display:none;">hide</a></span>
</div>

使用Javascript：

function full_view(e) {
document.getElementById('disMore').style.display = "block";
document.getElementById('more').style.display = "none";
document.getElementById('hide').style.display = "block";
}
function half_view(e) {
document.getElementById('disMore').style.display = "none";
document.getElementById('more').style.display = "block";
document.getElementById('hide').style.display = "none";
}

Answer 2

你可以这样做：

<div id="text">
   Your content...
</div>

<a href="#" id="readall">Read all</a>

$(document).ready(function() {
    //Change this variable to show more or less lines:
    var nrOfLines = 2;
    var height = 0;

    //Get line height
    height = $('div#text').css('line-height');
    height = height.substring(0, height.search('px'));
    height = (height * nrOfLines) + 'px';
    //Set div to only show 2 lines
    $('div#text').css({'height' : height});

    setTriggers();

    function setTriggers() {
        $('a#readall').click(function() {
           $(this).attr('id', 'hide');
            $(this).html('Hide');
            $('div#text').css({'height' : 'auto',
                               'overflow' : 'auto'});
            setTriggers();
        });

        $('a#hide').click(function() {
           $(this).attr('id', 'readall');
            $(this).html('Read all');
            $('div#text').css({'height' : height,
                               'overflow' : 'hidden'});
            setTriggers();
        });
    }

});

你的CSS：

div#text {
    border: 1px solid black;
    width: 250px;
    overflow: hidden;
}

我在这里做了一个例子：http://jsfiddle.net/c5sza/2/

你可以通过使用滑动效果等来使它更多。

Answer 3

您可以使用 PURE CSS线夹属性来保存设计。请看看

  

.card .card-header {
  font-weight: 600
}

.card .card-body .content {
  line-height: 20px;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;
  margin-bottom: 8px;
  overflow: hidden;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />

<div class="container my-3">
  <div class="row">
    <div class="col-md-12">
      <h4 class="mb-3">Line-Clamp Text-Ellipsis Example</h4>
    </div>
    <div class="col-md-4">
      <div class="card">
        <div class="card-header">BTC - Bitcoin</div>
        <div class="card-body">
          <p class="content"> Bitcoin is the most secure and robust cryptocurrency in the world, currently finding its way across the world of business and finance. Bitcoin was thought of as Internet money in its early beginnings. Unlike fiat currencies Bitcoin is a decentralized
            currency. That means that a network of users control and verify transactions instead of a central authority like a bank or a government. Up to this day, Bitcoin uninterruptedly works as money one person pays another person for goods and services.
            Once Bitcoin is exchanged, the record of the transaction is publicly recorded onto a ledger known as the blockchain, which other Bitcoin users, known as miners, verify by putting those transactions into a block and adding it to the blockchain
            after Proof of Work (PoW).</p>
        </div>
      </div>
    </div>
  </div>
</div>

Answer 4

您可以使用CSS line-height和height来控制它。这是我在jsfiddle上的简单演示： http://jsfiddle.net/7xv6J/

仅将div内容显示为两行

4 个答案: