word-wrap怎么自动换行?css强行自动换行教程

本篇文章给大家带来的内容是关于word-wrap怎么自动换行?css强行自动换行教程,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。

word-wrap介绍

word-wrap是设置对象内文字遇到对象顶边时是否采取换行排版布局。

1、语法

立即学习“前端免费学习笔记(深入)”;

word-wrap:normal—— 允许内容顶开指定的容器边界,遇到连续没有空格英文或没有空格数字不换行(默认,不设置对象也具备默认样式)

word-wrap:break-word —— 内容将在边界内换行,当内容太多顶到对象边界时,内容自动强制换行。

2、常见情况

对象内连续数字或字母太多后,内容顶边对象容器后不会换行,而是溢出继续不换行显示。和汉字或有空格不同,汉字会定格容器边界会自动换行。

3、使用语法

p{word-wrap:break-word}

设置html段落p内文字顶格对象容器边缘自动换行。

代码实例:

css强制换行.bos{ width:200px; height:80px; border:1px solid #F00; word-wrap: break-word; }

83480348023802ufjflsjfds843820483048jfdljfsl

显示效果如下:

微信截图_20181122143819.png

设置class=bos对象宽度,边框,里面放入连续不断文字和数字内容。如果不设置word-wrap: break-word可以浏览器中观察连续数字内容不换行超出溢出盒子。

这里给予对象设置word-wrap: break-word强制换行样式。

以前老IE浏览器比如IE6不支持,但现在大部分都是有谷歌浏览器,随电脑系统升级都使用更高IE浏览器,或其它品牌浏览器,所以大部分都兼容此css自动换行属性word-wrap样式,大家可以放心使用。

以上就是对word-wrap怎么自动换行?css强行自动换行教程的全部介绍,如果您想了解更多有关CSS3教程,请关注PHP中文网。

以上就是word-wrap怎么自动换行?css强行自动换行教程的详细内容,更多请关注创想鸟其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 chuangxiangniao@163.com 举报,一经查实,本站将立刻删除。
发布者:程序猿,转转请注明出处:https://www.chuangxiangniao.com/p/1613515.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2025年12月24日 03:41:46
下一篇 2025年12月24日 03:41:59

相关推荐

  • word-wrap和text-overflow有什么不同?两种属性详解

    在css样式中,很多人都分不清楚两种属性,一种是文本溢出,另外一种是文字换行,那么word-wrap和text-overflow属性各是什么?下面我们来总结一下word-wrap和text-overflow属性。 一:word-wrap强制换行属性 在css3中,我们可以使用word-wrap属性来…

    2025年12月24日
    000
  • 用CSS实现网站变黑白色

    这篇文章主要介绍了关于用css实现网站变黑白色,有着一定的参考价值,现在分享给大家,有需要的朋友可以参考一下 以下为全站CSS代码.  html { filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1); } 使用方法:这段…

    好文分享 2025年12月24日
    000
  • css实现自动换行以防撑破div影响排版

    自动换行问题,正常字符的换行是比较合理的,而连续的数字和英文字符常常将容器撑大,挺让人头疼,下面介绍的是css如何实现换行的方法 对于p,p等块级元素正常文字的换行(亚洲文字和非亚洲文字)元素拥有默认的white-space:normal,当定义的宽度之后自动换行html 正常文字的换行(亚洲文字和…

    好文分享 2025年12月24日
    000
  • css中强制换行word-break、word-wrap、white-space的区别

    css中强制换行word-break、word-wrap、white-space区别实例说明,需要的朋友可以参考下 测试用的HTML代码 safjaskflasjfklsajfklasjflksajflksjflkasfdsafdsfksafjThis is all English. This is…

    2025年12月24日 好文分享
    000
  • 详解css加载会造成阻塞吗_CSS教程_CSS_网页制作

    这次给大家带来详解css加载会造成阻塞吗,css加载造成阻塞的注意事项有哪些,下面就是实战案例,一起来看一下。 终于考试完了,今天突然想起来前阵子找实习的时候,今日头条面试官问我,js执行会阻塞DOM树的解析和渲染,那么css加载会阻塞DOM树的解析和渲染吗?所以,接下来我就来对css加载对DOM树…

    2025年12月24日 好文分享
    000
  • CSS3中使用word-wrap将英文单词强制换行的示例代码分享

    语法 word-wrap: normal|break-word;所有主流浏览器都支持 word-wrap 属性。 https://home.cnblogs.com/set/account/ 不写word-wrap:break-word;的效果 加上word-wrap:break-word;的效果 以…

    2025年12月23日
    000
  • 关于CSS3中选择符的实例详解

    英文原文: www.456bereastreet.com/archive/200601/css_3_selectors_explained/中文翻译: www.dudo.org/article.asp?id=197注:本文写于2006年1月,当时IE7、IE8和Firefox3还未发行,文中所有说的…

    好文分享 2025年12月23日
    000
  • 阐述什么是CSS3?

    网页制作Webjx文章简介:CSS3不是新事物,更不是只是围绕border-radius属性实现的圆角。它正耐心的坐在那里,已经准备好了首次登场,呷着咖啡,等着浏览器来铺上红地毯。            CSS3不是新事物,更不是只是围绕border-radius属性实现              …

    好文分享 2025年12月23日
    000
  • CSS教程(三)伪类——动态链接

    伪类可以看做是一种特殊的类选择符,是能被支持css的浏览器自动所识别的特殊选择符。它的最大的用处就是可以对链接在不同状态下定义不同的样式效果。 1.  语法 伪类的语法是在原有的语法里加上一个伪类(pseudo-class):selector:pseudo-class {property: valu…

    2025年12月23日
    000
  • CSS教程(四)如何在网页中插入CSS

    前两章我们了解了css的语法,但要想在浏览器中显示出效果,就要让浏览器识别并调用。当浏览器读取样式表时,要依照文本格式来读,这里介绍四种在页面中插入样式表的方法:链入外部样式表、内部样式表、导入外表样式表和内嵌样式。   链入外部样式表 链入外部样式表是把样式表保存为一个样式表文件,然后在页面中?l…

    2025年12月23日
    000
  • CSS教程(五)如何使用DW4创建CSS

    1. css styles面板 通过前面几章的学习,相信大家对css有了一定的了解,这一章我们来讲解如何利用dreamweaver4来创建css。首先运行dreamweaver4,启动后,选择菜单下的windows->css styles(或按shitf+f11),系统弹出css styles…

    2025年12月23日
    000
  • CSS教程(六) DW4中CSS属性详解

    在dreamweaver4的css样式里包含了w3c规范定义的所有css1的属性,dreamweaver4把这些属性分为type(类型)、background(背景)、block(块)、box(盒子)、border(边框)、 list(列表)、positioning(定位)、extensions(扩…

    2025年12月23日
    000
  • CSS教程(七) 滤镜

    css提供了一些内置的多媒体滤镜特效,使用这种技术可以把可视化的滤镜和转换效果添加到一个标准的html元素上,例如图片、文本容器、以及其他一些对象。dreamweaver4提供了16种滤镜可供选择,如下图: 下面,我们就来看看在dreamweaver4里如何方便的使用这些css滤镜。 建立一个自定义…

    2025年12月23日
    000
  • CSS教程(八) 简单介绍CSS结合JS的运用

    八、 简单介绍css结合js的运用(针对事件动作) 利用css配合javascript的可以做很多更酷的动态页面效果,在本教程的最后给大家简单介绍一下css配合js的应用。首先,我们要搞清楚事件和动作的概念。在客户端脚本中,javascript 通过对事件进行响应来获得与用户的交互。例如,当用户单击…

    2025年12月23日
    000
  • CSS教程(一)初识CSS

    css教程(一)认识css     dreamweaver4是现今最好的网站编辑工具之一,用它来给制作网页的css样式表会更简单、更方便。本教程教你如何利用dreamweaver4在页面中加入css,你不用死记硬背的记代码标记,也不用去看很厚的css手册,你就可以轻松自如的在网页中运用css。不过首…

    2025年12月23日
    000
  • 记事本写完代码后怎么运行html_记事本代码运行html步骤【教程】

    将记事本编写的HTML代码保存为.html格式文件,通过“另存为”选择“所有文件”并添加.html扩展名;2. 双击或右键用浏览器打开该文件即可查看网页效果;3. 也可直接将文件拖拽至浏览器窗口快速预览;4. 熟悉命令行者可用cmd进入文件目录后输入start 文件名.html运行。 如果您已经使用…

    2025年12月23日
    000
  • 记事本的html代码怎么运行_记事本运html代码方法【教程】

    首先用记事本编写HTML代码,输入基础结构如标题和段落;接着在“另存为”时选择保存类型为“所有文件”,文件名设为myweb.html并采用UTF-8编码;然后双击保存的.html文件,浏览器将自动打开显示网页内容;若需修改,右键用记事本重新编辑并保存后刷新浏览器即可。 用记事本写好的HTML代码想要…

    2025年12月23日
    000
  • studio怎么运行html文件_studio运行html文件方法【教程】

    Android Studio 非运行 HTML 理想工具,可通过安装 HTML Preview 插件实现预览;2. 最简单方式是右键文件在资源管理器中打开并用浏览器直接运行;3. 对于需 HTTP 服务的功能,推荐使用 Node.js 搭建本地服务器,通过 npx http-server 启动并在 …

    2025年12月23日
    000
  • html界面要怎么创建并运行_创建并运行html界面步骤【教程】

    首先创建HTML文件并用浏览器打开,具体步骤为:1. 用记事本编写HTML代码并保存为index.html;2. 双击文件或右键选择浏览器打开;3. 推荐使用VS Code等编辑器提升开发体验;4. 对于复杂项目需通过Node.js运行http-server在本地服务器预览。 如果您希望在本地计算机…

    2025年12月23日
    000
  • 新建文本文档怎么运行html_新建文本文档运行html步骤【教程】

    1、将文本文档另存为.html格式,选择“所有文件”类型避免保存为.txt;2、双击HTML文件或右键用浏览器打开可查看效果;3、修改代码后保存并刷新浏览器即可实时预览更新内容。 如果您使用文本文档编写了HTML代码,想要在浏览器中查看效果,需要将文本文件转换为可运行的HTML文件。以下是实现这一目…

    2025年12月23日
    000

发表回复

登录后才能评论
关注微信