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

Question

我正在使用 codeigniter 创建网站。在我的视图页面中，我在用户个人资料视图中显示了用户输入数据，但问题是当段落太长时，它会像这样显示

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

现在它更清晰了，看起来不错，我该怎么做？我尝试使用 text-overflow，但它只适用于水平。需要快速帮助。

这是查看页面中的 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 中。