css文字不换行(网页中不换行)

  在日常学习和工作中,你是否经常觉得时间不够用?为了帮助你提高效率,今天,就为大家分享一些CSS小技巧,如果你感觉有用,也可以收藏与分享给你的小伙伴们~

image.png

  1. 文字水平居中

  将一段文字置于容器的水平中点,只要设置text-align属性即可:

  text-align:center;

  2. 容器水平居中

  先该容器设置一个明确宽度,然后将margin的水平值设为auto即可。

  div#container {

  width:760px;

  margin:0 auto;

  }

  3. 文字垂直居中

  单行文字的垂直居中,只要将行高与容器高设为相等即可。

  比如,容器中有一行数字。

  

1234567890


  然后CSS这样写:

  div#container

  {height: 35px;

  line-height: 35px;

  }

  如果有n行文字,那么将行高设为容器高度的n分之一即可。

  4. 容器垂直居中

  比如,有一大一小两个容器,请问如何将小容器垂直居中?

  


  


  


  


  首先,将大容器的定位为relative。

  div#big{

  position:relative;

  height:480px;

  }

  然后,将小容器定位为absolute,再将它的左上角沿y轴下移50%,最后将它margin-top上移本身高度的50%即可。

  div#small {

  position: absolute;

  top: 50%;

  height: 240px;

  margin-top: -120px;

  }

  5. css中强制不换行代码是white-space:nowrap

  这个属性声明建立布局过程中如何处理元素中的空白符。值 pre-wrap 和 pre-line 是 CSS 2.1 中新增的。

  属性值:

  normal 默认。空白会被浏览器忽略。

  pre 空白会被浏览器保留。其行为方式类似 HTML 中的

 标签。


  nowrap 文本不会换行,文本会在在同一行上继续,直到遇到
标签为止。

  pre-wrap 保留空白符序列,但是正常地进行换行。

  pre-line 合并空白符序列,但是保留换行符。

  inherit 规定应该从父元素继承 white-space 属性的值。


发表评论

评论列表

还没有评论,快来说点什么吧~