css强制文字不换行实现代码

   强制不换行,直接使用white-space:nowrap即可。

  CSS设置不转行:

  overflow:hidden 隐藏

  white-space:normal 默认

  pre 换行和其他空白字符都将受到保护

  nowrap 强制在同一行内显示所有文本,直到文本结束或者遭遇 br 对象

  例,强制不换行

  代码如下

  div{

  white-space:nowrap;

  }

时间: 2024-11-10 11:25:45

css强制文字不换行实现代码的相关文章

css强制文字不换行实例详解

强制不换行 CSS设置不转行: overflow:hidden 隐藏 white-space:normal 默认 pre 换行和其他空白字符都将受到保护 nowrap 强制在同一行内显示所有文本,直到文本结束或者遭遇 br 对象 例  代码如下 复制代码 div{ white-space:nowrap; } 注意 .p4{white-space:nowrap; width:10px;}/*强制不换行,都起作用*/ .p5{white-space:nowrap; overflow:hidden;

用CSS实现文字垂直居中的代码

用CSS实现文字垂直居中的代码 <style type="text/css"><!--.con_div{width:400px;height:300px;border:1px solid #777;text-align:center;display:table-cell;vertical-align:middle;background:red;color:#fff}/*FOR IE*/.webjx{width:0;height:100%;display:inline-

图片按比例缩小(css强制)js代码

<html xmlns="http://www.111cn.net/1999/xhtml"> <head> <meta http-equiv="content-type" content="text/html; charset=gb2312" /> <title>图网页特效代码</title> <style> <!-- ,很多情况下,不用这种方法,会增加ie负荷.--&

js+css实现文字散开重组动画特效代码分享_javascript技巧

文字散开重组动画这款特效我们可以在输入框中指定任意文字,点击确定按钮后,就会将原先的文字爆炸散去,新的文字以像素点的形式组合起来,看起来非常棒. 运行效果图: 这是输入HAPPY后安按钮后效果,当然可以随便输文字 好酷的特效,连中文都支持,看如下图: 为大家分享的文字散开重组动画特效代码如下 <html> <head> <meta charset="UTF-8"> <title>文字散开重组动画特效</title> <l

css实现文字过长显示省略号的方法

 因为网页排版的需要,有些地方需要过长的问题加上省略号.比如:标题限制20个中文的宽度,超出的就用省略号代替.之前会使用程序截取的方法,不过使用css来截取更有利于SEO. 下面就介绍一下具体的使用方法: <div class="title">当对象内文本溢出时显示省略标记</div> 这是一个例子,其实我们只需要显示如下长度: css实现网页中文字过长截取... title class应该这样写: .title{ width:300px; white-spac

CSS控制文字溢出时的自动隐藏方法

 代码如下 复制代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv=&qu

CSS强制换行对齐的实现方法

 本文实例讲述了CSS强制换行对齐的实现方法.分享给大家供大家参考.具体分析如下: 用CSS控制中英文字符强制换行并两端对齐,有效避免DIV的内容超出范围而改变网页布局,强制换行的功能很实用.   代码如下: <html> <head> <title>CSS强制换行对齐</title> </head> <body> 英文对齐: <div style="font-size:12px;width:300;text-alig

CSS隐藏文字的方法

h1标签对提高SEO关键词排名的作用想必是个站长都知道,但是h1标签会使文字变大,有时候会在网页中显得格格不入.下面小编来跟大家分享下CSS隐藏文字的方法. 下面就拿网络教学基地logo部分用CSS隐藏文字来给大家举例: 我们从h1代码部分看到的其实只是文字描述,但是为了整体美观考虑,我们把h1标签里面的a链接文字用CSS隐藏,并且设置背景图片logo,这样外观看到的就是logo图片 CSS隐藏文字代码: h1 a { height: 80px; width: 280px; float: lef

CSS文本如何折行介绍

white-space:属性设置如何处理元素内的空白(空格.换行和tab字符)的处理. normal 默认.空白会被浏览器忽略. pre 空白会被浏览器保留.其行为方式类似 HTML 中的 标签.   nowrap 文本不会换行,文本会在在同一行上继续,直到遇到 标签为止. pre-wrap 保留空白符序列,但是正常地进行换行. pre-line 合并空白符序列,但是保留换行符. inherit 规定应该从父元素继承 white-space 属性的值. word-wrap:设置或检索当当前行超过