首页 前端知识 <span>标签中英文/中文自动换行

<span>标签中英文/中文自动换行

2024-02-05 11:02:00 前端知识 前端哥 706 160 我要收藏

span标签是被用来组合文档中的行内元素。span 没有固定的格式表现。当对它应用样式时,它会产生视觉上的变化。当内容过长时,我们可以通过overflow: hidden;设置隐藏溢出部分,但有的应用场景下我们希望内容能够自动换行。

  1. <span>标签中需要用到的自动换行,即CSS里的white-space属性

white-space 属性设置如何处理元素内的空白。相关属性值如下:

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

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

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

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

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

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

综上,可以使用normal或pre-wrap来设置换行。

  1. 让p 和 span标签自动换行的css语句

span{
    border: 1px solid red;
    word-break: normal;
    width: auto;
    display: block;
    white-space: pre-wrap;
    word-wrap: break-word;
    overflow: hidden;
}
 
 
 
 
p {
    word-wrap: break-word;
}

3.<span>标签自动换行(全英文/数字状态下)

注意:html 中 span 换行规则:html中span不换行默认只针对英文有效!!

(若是想对中文设置有效须要添加样式 style="white-space:nowrap;")

但,如果想要纯英文换行,则对应style样式里还需要加:word-break:break-all

span{
    font-weight: 300;
    font-style: normal;
    font-size: 14px;
    height:auto;
    display: block;
    text-align: left;
    white-space: pre-wrap;
    word-break:break-all;
}

参考:https://www.imooc.com/article/35786

转载请注明出处或者链接地址:https://www.qianduange.cn//article/1357.html
评论
发布的文章

Web10--jQuery进阶

2024-02-19 09:02:46

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!