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

Question

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

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

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

这是视图页面中的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中。