jquery - 如何隐藏 HTML 中溢出文本的单词？

Question

我正在使用 codeigniter 创建网站。在我的 View 页面中，我在用户配置文件 View 中显示了用户输入数据，但问题是当段落太长时它会像这样显示

你可以看到有一个更多信息按钮找不到因为段落所以我需要像这样

现在它更清晰，看起来更漂亮了，我该怎么做？我尝试使用文本溢出，但它只能在水平方向上工作。需要快速帮助。

这是 View 页面中的 php 代码..

 <div id="top-slider">
            <div id="layer1">            
                <?php if (!empty($package_data)){?>


                        <?php if (!empty($package_data['Photos'])){ ?>
                            <img src="<?php echo base_url()."files/media/".md5($profileID)."/host_package/".$package_data['Photos'][0]['Title'];?>">
                            <h2>- <?php echo $package_data['PackageTitle']; ?> -</h2>
                            <p>"<?php echo $package_data['Description']; ?>"</p>
                        <?php } else{?>    
                            <img src="<?php echo base_url()?>assets_profile/img/bg/2.jpg">  
                            <p >"<?php echo $profile_info['PersonalDescription']; ?>"</p>
                        <?php }?>
                <?php }else{ ?>
                        <img src="<?php echo base_url()?>assets_profile/img/bg/2.jpg">

                        <p>"<?php echo $profile_info['PersonalDescription']; ?>"</p>       
                <?php } ?>
            </div>
</div>

在 HTML 页面呈现后，这是查看页面源代码的样子

<div id="top-slider">
            <div id="layer1">            
                            <h2>- Nepal By Drive -</h2>

                            <p>"Nepal is first mentioned in the late
                             Vedic text, Atharvaveda Parisista as a place exporting blankets, and in
                             the post-Vedic Atharva Siras Upanisad.[22] In Samudragupta's Allahabad 
                            inscription it is mentioned as a bordering country. The 'Skanda Purana' 
                            has a separate chapter known as 'Nepal Mahatmya', which "explains in 
                            more details about the beauty and power of Nepal." Nepal is also 
                            mentioned in Hindu texts such as the Narayana Puja.[2"</p>
            </div>
</div>

Answer 1

设置固定的宽度和高度(可能需要使用百分比才能在您的网站上正确显示)然后像这样使用溢出和文本溢出:

overflow: hidden;
text-overflow: ellipsis;

在你的 CSS 中。