美文网首页
css之文本换行

css之文本换行

作者: lesdom | 来源:发表于2019-08-16 14:56 被阅读0次

方式一

强制换行,将英文单词从中间截断。

word-break: break-all;

方式二

将单词看做一个整体,移到下一行。
上一行会空出一定的距离。
当下一行也放不下单词时,会进行截断。

word-wrap: break-word;

空白换行

white-space 属性设置如何处理元素内的空白。

normal: 默认。空白会被浏览器忽略。
pre: 空白会被浏览器保留。其行为方式类似 HTML 中的 <pre> 标签。
nowrap: 文本不会换行,文本会在在同一行上继续,直到遇到 <br> 标签为止。
pre-wrap: 保留空白符序列,但是正常地进行换行。
pre-line: 合并空白符序列,但是保留换行符。
inherit:规定应该从父元素继承 white-space 属性的值。

网站导航

网站导航

相关文章

  • css之文本换行

    方式一 强制换行,将英文单词从中间截断。 方式二 将单词看做一个整体,移到下一行。上一行会空出一定的距离。当下一行...

  • 文字溢出换行(单行或多行)【转】

    单行文本换行 css需设置属性: 多行文本换行 css需设置属性:(-webkit内核才有效) -webkit-l...

  • web前端入门到实战:css3基础-文本与字体+转换+过渡+动画

    Css3文本与字体 文本阴影 word-break换行: word-wrap换行(中文无效): 文本溢出时处理: ...

  • css换行

    css的换行显示 1. 浏览器默认显示 文本超出不会断开换行,以单词断句换行 2.word-wrap: break...

  • CSS文本、空白换行

    前提:文本的父容器是块级元素。首先,我们来整理一下与换行有关的3个CSS属性: word-break 该属性决定文...

  • CSS文本样式

      单行文本溢出显示省略号 多行文本溢出 文字选中滑动背景色 禁止文本缩放 禁止文本选中   css实现不换行、自...

  • 实用css

    标签: css 正文 1.图像灰度 2.文本自动换行 3.模糊文本 4.css动态省略号 5.样式重置 6.通用媒...

  • css文本换行,超出显示...

    单行文本: white-space: nowrap/规定段落中的文本不进行换行/ text-overflow: e...

  • CSS3 文本换行

    文本换行其实是个非常常用但并不起眼的特性。你什么都不用设,浏览器自动就会换行。例如英语,浏览器会根据容器尺寸,选择...

  • 多行文本溢出显示省略号

    单行文本换行: 多行文本换行:

网友评论

      本文标题:css之文本换行

      本文链接:https://www.haomeiwen.com/subject/wmzfsctx.html