怎么让一长串英文字符自动换行?

长串英文字符之间没有空格,整串都显示在一行,撑破了div,甚至跑到屏幕外了,如何解决?

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>怎么让一长串英文字符自动换行?|www.125jz.com</title>
<style type="text/css">
div{ width:300px; border:1px solid #999;}
</style>
</head>

<body>
<div>artificialintelligenceartificialintelligenceartificialintelligenceartificialintelligence</div>
</body>
</html>

运行如下图所示:
怎么让一长串英文字符自动换行?

解决办法: 设置一个css属性:word-break: break-all; 即可。

div{ width:300px; border:1px solid #999;word-break: break-all; }

怎么让一长串英文字符自动换行?

125jz网原创文章。发布者:江山如画,转载请注明出处:http://www.125jz.com/4297.html

(0)
江山如画的头像江山如画管理团队
上一篇 2019年11月20日 下午7:37
下一篇 2019年11月21日 上午9:22

99%的人还看了以下文章

  • 3个超酷的CSS3图片动画特效:图片变圆角,放大,旋转

    本实例制作需要学习《CSS3 transition transform属性及实例详解》,学完后可先练习CSS3 transform:rotate()制作旋转图片 See the Pen 三个CSS3图片动画特效 by 江山如画 (@jgyzhr)on CodePen.

    2020年1月1日
    1.7K0
  • CSS 实现水平、垂直居中布局代码大全

    CSS实现水平居中 若是行内元素,则直接给其父元素设置text-align: center即可 若是块级元素,则直接给该元素设置margin: 0 auto即可 若子元素包含浮动元素,则给父元素设置width:fit-content并且配合margin .parent { width: -webkit-fit-content; width: -moz-fit…

    2019年11月26日
    2.6K0
  • CSS制作三角形原理—超简单

    网页制作中我们经常会需要三角形图标,例如内容展开收起、左右箭头点击切换轮播,点击某条列表数据查看详情等。 三角形图标应用范围广,我们有必要了解一下它的实现原理。 1) 一个最基础的边框效果 .content { width: 50px; height: 50px; border: 2px solid; border-color:#ff9600 #3366ff…

    2019年11月26日 网页制作
    2.5K0
  • 6个实例教你学会JavaScript的箭头函数

    在看别人JS代码时,经常会看到一些类似下面代码的箭头函数,如果你没有接触过箭头函数,估计要看晕了,这些都是什么东西?今天中国网页设计通过6个实例,教给大家掌握箭头函数的语法及使用。

    2018年2月17日
    2.0K0
  • 第4课:制作自己的第一个网站

    学完前几节课,现在只需再花几分钟时间,你就能学会如何制作自己的第一个网站了。 如何做呢? 通过第一课,我们知道制作一个网页需要有浏览器和记事本程序(或者类似的文本编辑器)。请打开记事本程序(Notepad):依次选择“开始菜单→程序→附件→记事本”即可。 然后呢? 我们先从简单的做起吧。先试着做一个显示如下内容的网页:“哇!这是我的第一个网站。 ”继续学习,…

    2018年1月20日
    2.6K0
  • Flex布局“弹性盒子”

    一.概念 flex布局: Flex Box 的缩写,意味“灵活的盒子”或“弹性盒子”,所以flex布局又称“弹性布局”。 flex容器 采用flex布局的元素,成为flex容器。display:flex; flex项目 flex容器的所有子元素自动成为容器成员,称为flex项目。 <div style=“ display:flex;”>   &l…

    2020年4月12日
    2.7K0

发表回复

登录后才能评论