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

长串英文字符之间没有空格,整串都显示在一行,撑破了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)
江山如画的头像江山如画管理团队
如何为需要打印的网页设置单独的css样式
上一篇 2019年11月20日 下午7:37
人工智能领域的典型的应用和研究方向有哪些?
下一篇 2019年11月21日 上午9:22

99%的人还看了以下文章

  • 跟永哥学HTML5(1):认识html5

    HTML5(简称H5),是超文本标记语言(HTML)的第五次重大修改,是最新一代的超文本标记语言,它不单单是一种标记语言,更为下一代 Web 提供了全新功能 。

    2018年1月21日
    2.8K0
  • CSS3动画:@keyframes animation 案例——制作滚动公告

    滚动公告的制作请参阅:Marquee标签实现跑马灯、滚动公告、通知效果 今天我们使用CSS3的@keyframes和animation 制作滚动文字公告。 @keyframes规则 @keyframes 规则用于创建动画。在@keyframes 中规定某项 CSS 样式,就能创建由当前样式逐渐改为新样式的动画效果。 注释:当动画完成后,动画的状态会回到初始状…

    2019年2月26日
    11.9K0
  • 跟永哥学HTML5(6)H5语义化标记使用示例

    介绍了HTML5中新增的语义化标记article section aside hgroup header footer nav time mark figure figcaption,对各个标记给出解释和应用示例。

    2020年2月12日
    5.6K0
  • css布局基础:浮动和清除浮动练习1

    主要知识点: 1、浮动:让元素脱离标准流,从而实现灵活的布局效果。 2、浮动只能左右,不能上下。float:left/right/none。 3、子元素浮动会造成父元素高度塌陷,清除浮动的3种方法: 方法1:通过overflow属性 方法2:通过clear属性 方法3:通过伪元素选择器(推荐) 效果图: 参考: <!DOCTYPE html> &…

    2020年4月4日
    7.8K0
  • 第14课:元素的定位

    CSS定位令你可以将一个元素精确地放在页面上你所指定的地方。联合使用定位与浮动(参见第13课),你将能够创建多种高级而精确的布局。本课我们将讨论以下内容: CSS定位的原理 绝对定位 相对定位 CSS定位的原理 把浏览器窗口想象成一个坐标系统: CSS定位的原理是:你可以将任何盒子(box)放置在坐标系统的任何位置上。 假设我们要放置一个标题。通过使用盒状模…

    2020年2月25日
    6.8K0
  • 手把手,永哥教你学会css sprite(雪碧图)技术

    css sprite又称雪碧图或css精灵。 雪碧图就是将小图标和背景图像合并到一张图片上,然后利用css的背景定位来显示需要显示的图片部分。 雪碧图被运用在众多使用了很多小图标的网站上。相对于把每张小图标以.png格式文件的形式引用到页面上,使用雪碧图只需要引用一张图片,对内存和带宽更加友好。 css sprite优点: 有效减少网站的http请求数量,加…

    2018年2月20日
    14.5K0

发表回复

登录后才能评论