小技巧处理div内容溢出

前几天遇到一个问题，代码是这样一个层次：

代码如下:

<div class="province">
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>
</div>

我设置了div的边框，

要想ul的内容在边框内，

必须设置div高度。

但是，ul内的内容是变化的，内容少的时候就不及div的高度。

不设高度的时候，ul的内容就出现在边框外了。

原来需要设置ul的边框。想想也是，先设置与他关系最近的元素吧。

对于前端不是很专业的同僚来说，写css样式表还是有个规则比较好：

指定css样式要有层次：如上例，定义li的样式 .province ul li{...}

写样式有个大致顺序：容器大小（width,height......）,容器位置（left,margin......）,容器文本（color......）,其他

这样尽可能避免样式覆盖之类的问题。

赞 (0)

相关推荐

  • div中文字内容溢出常见的解决方法

    由于文字内容的长度不确定性和页面布局的固定性,常常会遇到文字溢出的状况,有一下解决方法: 1:规定文字父容器的宽高,设置超出隐藏:overflo:"hidde" -------缺点是会经常遇到最后一行文字显示不全的情况,建议在只控制一行文字显示的时候使用 2:css+div防止文字溢出,超出部分变成省略号,折行显示,white-space:nowrap;word-break:break-all: text-overflow:ellipsis; -o-text-overflow:elli

  • jQuery实现控制文字内容溢出用省略号(…)表示的方法

    本文实例讲述了jQuery实现控制文字内容溢出用省略号(-)表示的方法.分享给大家供大家参考,具体如下: jQuery限制字符字数的方法 $(function(){ //限制字符个数 $(".text").each(function(){ var maxwidth=23; if($(this).text().length>maxwidth){ $(this).text($(this).text().substring(0,maxwidth)); $(this).html($(th

  • 文字溢出实现溢出的部分再放入一个新生成的div中具体代码

    看到群里有人提了一个问题,说文字溢出,如何实现溢出的文字放入一个新生成的div中, 想了一下原理,就是判断是否能在div里放下,如果不能,则在应该断开的地方,差入到新的div中,代码如下: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> &

  • 小技巧处理div内容溢出

    前几天遇到一个问题,代码是这样一个层次: 复制代码 代码如下: <div class="province">    <ul>        <li>1</li>        <li>2</li>        <li>3</li>    </ul></div> 我设置了div的边框, 要想ul的内容在边框内, 必须设置div高度. 但是,ul内的内容是变化的,内容少

  • 编写简洁React组件的小技巧

    本文源于翻译文章 Simple tips for writing clean React components, 原文作者 Iskander Samatov 在这篇文章中,我们会回顾一些简单的技巧,它们将帮助我们编写更简洁的 React 组件,并且更好地扩展我们的项目. 避免使用扩展操作符传递 props 首先,让我们从一个应该避免的反模式开始.除非有明确的理由这样做,否则应该避免在组件树中使用扩展操作符传递props,比如:{ ...props }. 通过这种方式传递 props 确实可以更快

  • Android手册之Toolbar搜索联动及监听小技巧

    目录 实践过程 监听 实现搜索 改变Overflow 修改Menu弹出位置 实践过程 监听 //返回事件的监听,也就是app:navigationIcon属性设置的图片的监听 idToolBar.setNavigationOnClickListener { Toast.makeText(this, "点击了返回", Toast.LENGTH_SHORT).show() } //右侧点击的监听 idToolBar.setOnMenuItemClickListener { Toast.ma

  • 注释PHP和html混合代码的小技巧(分享)

    我们在写php的时候有时候会遇到想要注释一部分的代码,是由html和PHP混合组成的,这时候如果一行一行去分开注释有点麻烦.但是又不敢删掉,这时候我们可以充分利用if语句去进行注释的功能 <?php if (1==2):?> //代码片段 <?php endif;?> 以上就是小编为大家带来的注释PHP和html混合代码的小技巧(分享)全部内容了,希望大家多多支持我们~

  • c# Linq常用的小技巧

    前言 在C#语言发展的历史长河中,Linq是一个极其重要的里程碑! Linq的语法吸取了SQL语法的特性,同时配合Lambda表达式又可以使代码更加优雅! 可以这么说,用好了Linq可以大大提高程序猿的工作效率,毕竟我们的日常工作本质就是对数据的处理.经历了十多年的发展,现在微软自带的内库包含的Linq函数已经非常多了,几乎满足我们日常工作. 下面根据一个对科室数据操作的例子,就个人觉得日常高频使用的Linq小技巧贴出来,权当是做个笔记了. 初始化数据 定义模型 这里定义一个科室对象,模拟我们日

  • 常用的10个Python实用小技巧

    大家好,都说追女孩方法大于态度,学Python也是,今天就给大家分享的是我在用Python编写程序时常用的一些小技巧. 1.多次打印同一个字符 在Python中,不用特地写一个函数来重复打印同一个字符,直接使用Print就可以 tem = 'I Love Python ' print(tem * 3) I Love Python I Love Python I Love Python 2.在函数内部使用生成器 在写Python程序时,我们可以在函数内部直接使用生成器,这样可以使代码更简洁. su

  • 使用Python操作MySQL的小技巧

    1.获取插入数据的主键id import pymysql database = pymysql.connect( host="127.0.0.1", port=3306, user="root", password="root", database="test" ) cursor = database.cursor() for i in range(5): cursor.execute('insert into test (n

  • python 提高开发效率的5个小技巧

    很多时候学习是一种难者不会,会者不难的事情. 下面的5个python技巧是性价比极高的知识点,一学就会,不难但是相当管用. 使用交互模式 使用python -i xxxx.py可以直接进入python的交互模式,可以很方便的调用xxxx.py中定义的方法和函数,特别适合调试没有main()方法的文件,强力推荐. 使用pdb进行调试 很多从c++/java转到python的同学可能对python没有断点功能相当失望. 其实python自带的pdb库就可以解决这个问题. 看这个例子. def sum

  • Vue看了就会的8个小技巧

    1. 始终在 `v-for` 中使用 `:key` 在需要操纵数据时,将key属性与v-for指令一起使用可以让程序保持恒定且可预测是很有必要的.这样Vue就可以跟踪组件状态,并对不同的元素有一个常量引用.在使用动画或Vue转换时,如果没有key ,Vue只会尝试使DOM尽可能高效.这或许会导致v-for中的元素出现乱序,或行为难以预测.如果我们对每个元素都有唯一的键引用,就能更好地预测Vue应用程序将如何精确地处理DOM操作. 2. 使用驼峰式声明 props,并在模板中使用短横线命名来访问

  • 分享JPA的几个小技巧

    分享JPA的几个小技巧

    关系型数据库其实很讨人厌,尤其是在你使用数据库驱动的开发模式时.需要首先把表给创建好了,然后再使用代码生成器反向生成一堆几乎无法可读的代码.当字段有变更的时候,又是一番折腾. 这其中的典型,就是MyBatis,所以催生了更加简洁的MyBatis Plus. 了解到一些大厂(阿里.腾讯.抖音等),JPA的使用也越来越广泛了,包括我们公司,这是把合适的工具放到了合适的地方.如果想要快速开发,JPA无疑是一个比较好的选择.你无需关注数据库表的结构,使用代码驱动即可完成工作,管它后面是MySQL还是Or

随机推荐