14、CSS-让长字符串超过宽度时自动换行-php教程-PHP中文网

14、CSS-让长字符串超过宽度时自动换行

php中文网

发布： 2016-07-29 08:56:22

原创

2374人浏览过

一、相关信息

当输出php的一个长字符串时（字符串是没有换行的）希望在当内容超过所设置的长度时字符串能够自动换行，否则该没有换行符号的字符串将超出所设置的宽度，无限拉伸页面

在纯html代码中，即使不做任何特殊申明，也会自动根据所设置的宽度进行自动换行，例如

<code><span><<span>div</span><span>style</span>=<span>"width: 100px;"</span>></span>
测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试
<span></<span>div</span>></span></code>

登录后复制

如上代码会当内容宽度超出100px时会自动进行换行输出

但当输出一个php的长字符串时

立即学习“前端免费学习笔记（深入）”；

怪兽AI数字人

数字人短视频创作，数字人直播，实时驱动数字人

查看详情

<code><span><<span>div</span><span>style</span>=<span>"width: 100px;"</span>></span><span><span><?php</span><span>echo</span><span>$long_content</span>; <span>?></span></span><span></<span>div</span>></span></code>

登录后复制

其中$long_content的内容宽度是远超过100px的，可以看到内容输出是不会自动换行的，会根据字符串的宽度无限拉伸页面，也即有多长就会拉伸多长，定义的宽度形如虚设，显然不是我们所期望的

二、问题描述

当输出长字符串时，内容不会自动换行，会无限拉伸页面

三、解决方案

使用如下的css定义

<code><span><<span>div</span><span>style</span>=<span>"width: 100px; word-break: break-all;word-wrap: break-word;"</span>></span><span><span><?php</span><span>echo</span><span>$long_content</span>; <span>?></span></span><span></<span>div</span>></span></code>

登录后复制

word-break 属性规定自动换行的处理方法，值 break-all 表示允许在单词内换行。
word-wrap 属性允许长单词或 URL 地址换行到下一行，值break-word 表示在长单词或 URL 地址内部进行换行。

').addClass('pre-numbering').hide(); $(this).addClass('has-numbering').parent().append($numbering); for (i = 1; i ').text(i)); }; $numbering.fadeIn(1700); }); });

以上就介绍了14、CSS-让长字符串超过宽度时自动换行，包括了方面的内容，希望对PHP教程有兴趣的朋友有所帮助。

大家都在看：

掌握PHP Switch语句的高级技巧：避免使用Break的方法 PHP开发者必读：Switch语句如何优雅地不使用Break？ PHP Switch语句的使用技巧：不使用Break的情况下会发生什么？提升PHP编程技能：Switch语句无Break应用实例剖析深入探讨PHP中break语句的多种用法