`

span 换行/不换行-解决

    博客分类:
  • css
阅读更多
相信很多朋友在设置span里面的内容有背景的时候会遇到如下问题:


1、设为display:block可以解决有背景,但换行,因block属性原因,必会换行

2、不用display:block背景便不会全部显示出来

3、float:left也不好用

4、有的只好用定位,较麻烦

解决办法:

把display设置为:inline-block

元素display属性的常见值说明:

block:块对象的默认值。将对象强制作为块对象呈递,为对象之后添加新行。
inline:内联对象的默认值。将对象强制作为内联对象呈递,从对象中删除行。
inline-block:将对象呈递为内联对象,但是对象的内容作为块对象呈递。旁边的内联对象会被呈递在同一行内。
non:隐藏对象。与 visibility 属性的hidden值不同,其不为被隐藏的对象保留其物理空间。
分享到:
评论

相关推荐

    div中加入span右对齐后出现换行显示两种解决思路

    div中加入span右对齐后,出现了换行问题,一般思路的话一定是认为通过分开两列,一个align=left,另一个align=right;很是疑惑,于是利用闲暇时间,搜索整理下,晒出来与大家分享,希望可以帮助你们

    Messagebox()如何换行

    方式一: Text to cc Noshow 第 1 行…………………. 第 2 行…………………. ... …………………. 第 <<nn>>行…………………. EndText MessageBox(cc,0,'关于如何换行')

    浅析css html span 块状不换行问题

    如果设置display:inline-block,则span并列在同行,而且width属性生效,下面为大家介绍下span 块状不换行问题

    div中英文无法自动换行的解决办法

    但是,如果输入的是英文字母,那么,无论你div设定宽度为多少,英文字母都是不换行直接在同一行输出,导致div的宽度远远超出设定的大小。 原因:这是因为div中,英文字母之间没有空格的话,它会默认认为这是一个...

    js计算字符个数回车换行兼容所有浏览器.rar

    DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html <head> <meta http-equiv="Content-Type" content="text/html; ...

    Asp.Net文本换行

    Asp.Net文本换行

    CSS实现强制不换行、自动换行、强制换行的css代码

    强制不换行 p { white-space:nowrap; } 自动换行 p { word-wrap:break-word; word-break:normal; } 强制英文单词断行 p { word-break:break-all; } *注意:设置强制将英文单词断行,需要将行内元素设置为块级...

    span设置text-indent不起作用的原因及解决方法

    }后发现并没有起作用,这是因为text-indent只能给块级元素设置,但是如果让span{display:block}时,就会换行,还得通过浮动来控制,增加了麻烦,所以改css为span.t-i{text-indent:-999px;display:inline-block;}

    react-split-text:用自定义的React元素包装字母,单词和行

    该组件使您可以拆分文本,并使用自定义元素包装每行,每个单词或每个字母。... 默认情况下,文本将自动使用span元素进行换行,并在调整大小时进行重新调整。 < SplitText> Hello World< / SplitText >

    CSS 网页内容换行控制

    在进行DivCSS布局时,需要对文本进行控制,我们在jb51.net以前的文章中,也...CSS中控制换行的四种属性。 一、white-space 可以实现HTML中PRE标签的效果,以及单元格的noWrap效果。[code]语法: white-space : normal |

    利用CSS截取标题长度方法

    虽然用动态语言可以对其控制,但是这样做是不利于搜索引擎收录的,而CSS很巧妙地解决了这个问题,请看下面的代码: 代码一:用于非表格LI或span等都可以 复制代码代码如下:.text-overflow { display:block;/*内联...

    CSS之float在IE浏览器下换行问题解决方法

    a标签float在IE等浏览器下换行的情况想必大家都有遇到过吧,解决方法很简单,就是把a标签放在文本前面,下面是具体的示例,需要的朋友了解下

    css给span加float:right右浮动后内容换行下移

    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> <...

    android TextView 文字部分渐变

    android实现TextView文字部分渐变色;LinearGradientFontSpan SpannableString

    vue-tight:Vue指令消除了元素之间的空白

    视密作为开发人员, 我想修剪内联元素之间的空格, 这样我就可以写... 在保留可读性的同时消除空白的一种解决方法是在行内元素之间插入换行注释: < h3> <!-- --> < span> Exam </ span> <!-- --> < sp

    ExtAspNet v2.2.1 (2009-4-1) 值得一看

    -修正EnableMaximize属性不能使Window最大化的BUG,修正了双击标题栏不能最大化的BUG。 -删除Button控件的SystemIcon属性,比如以前这样定义SystemIcon="Close",现在需要这样定义Icon="SystemClose"。 -Window...

    CSS文本超出div或者span时用省略号代替

    在项目中我们经常需要在文本过长时显示,将文本超出的部分内容用省略号代替: 思想为: 首先设置宽度,然后让超出的部分隐藏 如果有超出则在最后显示省略号 让文本不换行 具体css代码为: 复制代码代码如下:.title{...

    HTML中Li标签的使用示例

    希望实现标题在左对齐,日期在右对齐,当直接给日期的span加上float:right时,IE8和FF都OK,但IE6/7则会换行,下面给出一个简单有效的解决办法。 XML/HTML Code复制内容到剪贴板 <!DOCTYPE html PUBLIC "-//...

Global site tag (gtag.js) - Google Analytics