`
rebecca
  • 浏览: 315269 次
  • 性别: Icon_minigender_2
  • 来自: 北京
社区版块
存档分类
最新评论

CSS关于“文本超出范围隐藏”问题

阅读更多

 

 

老遇到的问题,缺乏总结,故今天总结,加强记忆。举例如下:

 

HTML 代码,

<--!

 

               <!--热点话题-->
     
    <div class="hot_topic">
     <h4 class="f_s"><a href="/" style="color:#d20408;">人大代表建议屏蔽网络热词,你怎么看?</a></h4>
       <ul class="ul_list"><li><a href="/" >为防止学生沉溺网游全国代表</a></li>
        <li><a href="/" >到底是什么影响不好呢?是对</a></li>
       
        </ul>
       
        </div>  <div class="clear"></div>
   
    <div class="hot_topic">
        <h4 class="f_s"><a href="/" style="color:#d20408;">人大代表建议屏蔽网络热词,你怎么看?</a></h4>
    <ul class="ul_list"><li><a href="/" >为防止学生沉溺网游全国代表</a></li>
        <li><a href="/" >到底是什么影响不好呢?是对</a></li>
       
        </ul></div>  <div class="clear"></div>
       
    <div class="hot_topic" >
        <h4 class="f_s"><a href="/" style="color:#d20408;">人大代表建议屏蔽网络热词,你怎么看?</a></h4>
    <ul class="ul_list" ><li style="border:none;"><a href="/" >为防止学生沉溺网游全国代表</a></li>
        <li style="border:none;"><a href="/" >到底是什么影响不好呢?是对</a></li>
       
        </ul></div>        
       
       
    </div>     <div class="clear"></div>

 

 

 

 

-->

 

 

 

CSS 代码,

 

<--!

 

/*热点话题*/
.hot_topic{width:358px;margin-left:5px;}

.ul_list{padding:10px 0px;}
.ul_list li {

   width:170px;    //同时也可以设置行高,根据需要而定
    float:left;
    padding:10px 0px;  //li 间距,也是为了美观
    margin-left:6px;

    line-height:200%;   //行高,这是为了美观
    padding:4px;
    text-indent:30px;   //首行缩进,li中也可以用哦^^
    list-style-type:none;
    list-style-position:inside;
    border-bottom:1px dashed #838383;
    overflow:hidden;                          //    text-overflow:hidden;
    white-space:nowrap;
 }
-->

 

 

效果,

 

 

    首先,要设定文本的长度 width:170px;,还有超出后的处理方法 text-overflow:hidden,或者,text-overflow: ellipsis; 必须标明不可以换行 white-space:nowrap;

 

 

   补充,如果想实现list-style-type:square;这样的列表样式,一定要注意,就不能用overflow:hidden;它们是矛盾的,下篇详细说明这个问题。工作过程中如果遇到这样的问题,两者都必须的话,那就把overflow: hidden;改为 text-overflow: ellipsis;好了.

  • 大小: 13.3 KB
0
0
分享到:
评论

相关推荐

    CSS文本超出2行就隐藏并且显示省略号

    //超出的文本隐藏 text-overflow:ellipsis; //溢出用省略号显示 white-space:nowrap; //溢出不换行 但是第三条属性,只能显示一行,不能用在这里,那么如果显示多行呢? 超出两行隐藏: css3解决了这个问题,解决...

    Css测试,li超出部分的汉字隐藏

    在CSS(层叠样式表)中,处理元素超出部分的隐藏是一个常见的需求,尤其是在文本布局或者列表项目(如li)的展示中。标题"Css测试,li超出部分的汉字隐藏"提示我们,这个话题主要关注如何在CSS中控制`&lt;li&gt;`元素内的...

    CSS实现不换行/自动换行/文本超出隐藏显示省略号

    CSS实现不换行/自动换行/文本超出隐藏显示省略号;自动换行,强制不换行,单行文本不换行多余文本显示省略号,第n行显示省略号,亲测有效。

    文本超出部分隐藏的两种方法

    文本超出部分隐藏,总结两种方法。 1、单行隐藏 html代码 当文字超过范围的时候,超出部分会隐藏起来。 css代码 .mi { width: 200px; overflow: hidden; text-overflow: ellipsis; white-space:nowrap; } 2、...

    解决layui表格内文本超出隐藏的问题

    标题中提到的“解决layui表格内文本超出隐藏的问题”是指通过修改默认的 CSS 样式,确保表格单元格中的长文本可以完全显示,而不会被截断。描述中的代码片段展示了具体的解决方案: ```css .layui-table-cell { ...

    CSS控制html文本溢出

    在实际项目中,通常会选择`div`元素的样式来处理文本溢出问题。这种处理方式可以确保页面布局的整洁性,特别是在列表展示或卡片式布局中非常有用。例如,在新闻摘要或商品列表中,可以限制每项的标题或描述的长度,...

    纯css控制超出部分省略号显示

    本文将详细介绍如何仅使用CSS来实现文本超出部分用省略号(...)显示的效果。 #### CSS实现原理 1. **`display:block;`**:此属性用于设置元素为块级元素。在本例中,将容器设置为块级元素,以便更好地控制其布局...

    CSS文本超出指定宽度后隐藏并显示为省略号的实现方法

    根据标题和描述,以及提供的部分内容,我们可以了解关于CSS文本超出指定宽度后隐藏并显示为省略号的实现方法,以及相关的知识点。以下详细说明: 1. CSS中实现文本溢出显示省略号的基本属性组合: - `text-...

    jquery+css3渐变显示“更多”隐藏内容

    标题中的“jquery+css3渐变显示“更多”隐藏内容”指的是使用JavaScript库jQuery和CSS3的过渡效果来实现一种动态展示隐藏文本的功能。当用户点击“更多”按钮时,原本被隐藏的文字会逐渐显现出来,给用户带来平滑的...

    CSS超出文本指定宽度用省略号代替和文本不换行

    CSS提供了多种方法来处理这种情况,尤其是当文本超出指定宽度时。本文将深入探讨如何使用CSS实现超出文本指定宽度用省略号代替以及禁止文本换行。 1. **一般文字截断** 当我们希望文本在特定宽度后被截断并用省略...

    CSS--文本溢出完美样式

    "CSS--文本溢出完美样式"这一主题聚焦于解决一个常见的问题:当文本内容过多,超出其容器的边界时,如何优雅地处理这种情况。以下是对这个知识点的详细讲解: 1. **文本溢出的基本概念**:在HTML元素中,如果文本...

    css li 超出隐藏代码

    `,文本将保持在同一行内,这是实现单行文本超出隐藏的基础。 3. `text-overflow: ellipsis;`:当文本超出其容器宽度并且`white-space`属性设置为`nowrap`时,此属性会使得超出部分显示为省略号。该属性告诉浏览器...

    CSS控制文本超出指定宽度显示省略号和文本不换行效果的实现

    在本篇文档中,我们将深入学习如何使用CSS控制文本的显示方式,具体来说是如何实现当文本超出指定宽度时,在文本的末尾显示省略号,并且文本不换行。这种效果在网页设计中非常常见,它能够帮助我们优雅地处理那些...

    Html内容超出标记宽度后自动隐藏

    在网页设计中,我们经常遇到显示长文本的问题。在处理这种情况时,我们通常不希望原始的HTML内容因为长度过长而破坏页面布局,或者导致乱码。为了解决这个问题,CSS提供了一些有效的解决方案,让我们可以在不截断...

    用css截取字符的几种方法详解(css排版隐藏溢出文本).docx

    总结来说,CSS提供了多种方式来处理文本溢出问题,你可以根据具体需求选择合适的方法。`overflow`和`text-overflow`组合适合单行文本的截断,`white-space: nowrap`适用于保持文本在同一行,而`-webkit-line-clamp`...

    div 超出隐藏 文字超出div部分隐藏css代码

    "div 超出隐藏 文字超出div部分隐藏css代码"这个主题就是关于如何利用CSS技术来处理元素(特别是文本)在div容器内超出边界时的显示问题。下面将详细解释这一技术的原理和实现方法。 首先,我们要理解CSS中的`...

    头歌教学实践平台 Web前端开发基础 CSS-文本与字体样式

    在Web前端开发中,CSS...通过学习和实践这些CSS文本与字体样式,你可以创建更加精致且适应性强的网页。头歌教学实践平台提供的源码txt格式资料,将帮助你更好地理解和应用这些知识点,进一步提升你的Web前端开发技能。

    第21章 CSS3文本效果

    在本章中,我们将深入探讨CSS3中的文本效果,这些...以上就是关于“CSS3文本效果”的主要知识点,它们为网页设计带来了更多创新和个性化的可能性。通过熟练掌握这些技巧,开发者可以创建更具吸引力和用户体验的网页。

Global site tag (gtag.js) - Google Analytics