根据行数显示/隐藏文本

我有一个文本框，垂直显示。我的客户希望在计算机/笔记本电脑上观看时，该框中的文本将全部显示，并且在移动设备上查看时具有“显示更多”按钮。我认为做这件事的最好方法就是在桌面上显示10行文字，在手机上显示5行文字，并隐藏其余部分，但我不知道这是否可行。这是我的HTML：根据行数显示/隐藏文本

<div class="box31 col-md-3 col-md-offset-0 col-sm-6 col-sm-offset-0 col-xs-8 col-xs-offset-2"> 
    <div class="phone"> 
    <img src="imgs/phone.png" alt="phone"> 
    </div> 
    <div class="box-text box-text2">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</div> 
    <div class="view-more"> 
    <button class="btn btn-success">More...</button> 
    </div> 
</div>

来源

2016-04-22 Mihail Ivanchev

为什么不根据身高来做呢？ – Kenny

也许这个职位将帮助解决您的问题：[检测移动设备]（http://stackoverflow.com/questions/3514784/what-is-the-best-way-to-detect-a-mobile-device-in- jQuery的）。我也发现这个有用的链接：[3种方式来检测移动设备]（http://magentohostsolution.com/3-ways-detect-mobile-device-jquery/） – flohdieter

@KennyDs是的，这也是一个选项。问题是，当我使用jQuery时，我是一个总的noob –

这里是为了实现你的结果

CSS

.open { 
    max-height:60px; 
    overflow: hidden; 
    } 

.remove{ 
    max-height:100%; 
}

的方式JS

jQuery(function($){ 
    $('.event').click(function(){ 
    $('.open').toggleClass('remove') 
    }) 
    })

DEMO

来源

2016-04-22 08:17:44 Fiido93

谢谢，这正是我所做的。我将其标记为答案。 –

谢谢@MihailIvanchev – Fiido93

我认为你可以使用CSS媒体查询这样的：

@media screen and (max-width: 768px) { 
    p { 
    max-height:60px; 
    overflow: hidden; 
    color:red; 
    } 
}

https://jsfiddle.net/wrbwpzwu/ （调整结果的一部分，以示区别）

来源

2016-04-22 07:37:30

这看起来很棒，适用于我。我现在要做的就是找到能够消除溢出的jQuery，当我按下按钮时，显示整个文本（或者改变最大高度）。谢谢！ –

$（“＃button”）。on（“click”，function（）{$（this）.css（“display”，“hidden”）; $（“＃myText”）.css（“overflow” ，“visible”）;}）' 类似的东西;-) 享受。 –

摸出要显示多少行，您需要计算行高与您想要显示的行数的乘积。下面的例子计算出三行。

document.querySelector('.view-more .btn').addEventListener('click', function() { 
 
    this.parentNode.previousElementSibling.classList.add('more'); 
 
});

body { 
 
    font-family: tahoma, sans-serif; 
 
} 
 
p { 
 
    margin: 0 0 5px; 
 
} 
 
.box-text { 
 
    font-size: 12px; 
 
    line-height: 12px; 
 
    max-height: 36px; 
 
    overflow: hidden; 
 
    margin-bottom: 10px; 
 
} 
 
.box-text.more { 
 
    max-height: none; 
 
    overflow: visible; 
 
} 
 
@media screen and (min-width: 480px) { 
 
    .view-more { 
 
    display: none; 
 
    } 
 
    .box-text { 
 
    max-height: none; 
 
    overflow: visible; 
 
    } 
 
}

<div class="box31 col-md-3 col-md-offset-0 col-sm-6 col-sm-offset-0 col-xs-8 col-xs-offset-2"> 
 
    <div class="box-text box-text2"> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p> 
 
    </div> 
 
    <div class="view-more"> 
 
    <button class="btn btn-success">More...</button> 
 
    </div> 
 
</div>

上面的代码使用移动第一原理的CSS。

JavaScript只是一个应用于遍历DOM的按钮的点击侦听器，以找到相关的box-text来向其添加more类，该类删除/重置最大高度和溢出属性。

jQuery的等值以上JS：

$('.view-more .btn').on('click', function() { 
    $(this).parent().prev().addClass('more'); 
});

来源

2016-04-22 07:57:39

根据行数显示/隐藏文本

回答

相关问题