HTML+CSS中控制长字符串的自动换行问题

最新推荐文章于 2024-08-12 15:57:18 发布
最新推荐文章于 2024-08-12 15:57:18 发布
阅读量7.5k 收藏 1
点赞数
分类专栏： .net CSS html JAVASCRIPT
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/jin_guang/article/details/9851661
版权
.net 同时被 3 个专栏收录
31 篇文章 0 订阅
订阅专栏
html
9 篇文章 0 订阅
订阅专栏
CSS
8 篇文章 0 订阅
订阅专栏
原文地址：

在HTML+CSS中，长字符串的自动换行问题，总是造成意想不到的麻烦。下面是一些相关的总结。

 

针对于div、p等块级元素：

1.对于正常文字的换行（亚洲文字和非亚洲文字）元素拥有默认的white-space:normal，当定义的宽度之后自动换行。


1#wrap{white-space:normal; width:200px; }
2 
3<div id="wrap">对于正常文字的换行（亚洲文字和非亚洲文字）元素拥有默认的white-space:normal，当定义的宽度之后自动换行。</div>

2.（IE浏览器）连续的英文字符和阿拉伯数字,使用word-wrap : break-word;或者word-break:break-all;实现强制断行


1#wrap{word-break:break-all; width:200px;} 或者#wrap{word-wrap:break-word; width:200px;}
2 
3<div id="wrap">wwwiteaocomwwwiteaocomwwwiteaocomiteao</div>

3.（Firefox浏览器）连续的英文字符和阿拉伯数字的断行,Firefox的所有版本的没有解决这个问题,我们只有让超出边界的字符隐藏或者,给容器添加滚动条


1#wrap{word-break:break-all; width:200px;overflow:auto;}
2 
3<div id="wrap">abcdefghijklmnabcdefghijklmnabcdefghijklmn111111111</div>
 
对于表格table：

1. (IE浏览器)使用 table-layout:fixed;强制table的宽度,多余内容隐藏


1<table style="table-layout:fixed" width="200">
2 <tr>
3  <td>abcdefghigklmnopqrstuvwxyz1234567890ssssssssssssss</td>
4 </tr>
5</table>

2.(IE浏览器)使用 table-layout:fixed;强制table的宽度,内层td,th采用word-break :break-all;或者word-wrap : break-word ;换行


1<table width="200"style="table-layout:fixed;">
2<tr>
3<td width="25%"style="word-break :break-all; ">wwwiteaocomwwwiteaocomwwwiteaocomiteao</td>
4<td style="word-wrap :break-word ;">wwwiteaocomwwwiteaocomwwwiteaocomiteao</td>
5</tr>
6</table>
3. (IE浏览器)在td,th中嵌套div,p等采用上面提到的div,p的换行方法
 
 
4.(Firefox浏览器)使用table-layout:fixed;强制table的宽度,内层td,th采用word-break :break-all;或者word-wrap : break-word;换行，使用overflow:hidden;隐藏超出内容，这里overflow:auto;无法起作用

1    <tablestyle="table-layout:fixed" width="200">
2<tr>
3<td width="25%"style="word-break :break-all; overflow:hidden; ">abcdefghigklmnopqrstuvwxyz1234567890</td>
4<td width="75%"style="word-wrap :break-word; overflow:hidden; ">abcdefghigklmnopqrstuvwxyz1234567890</td>
5</tr>
6</table>
 
5.(Firefox浏览器)在td,th中嵌套div,p等采用上面提到的对付Firefox的方法运行代码框，最后，这种现象出现的几率很小，但是不能排除网友的恶搞。

01    <!DOCTYPEhtml PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
02<html xmlns="http://www.w3.org/1999/xhtml">
03<head>
04<meta http-equiv="Content-Type"content="text/html;charset=gb2312" />
05<title>字符换行</title>
06<style type="text/css">
07table,td,th,div {border:1px green solid;}
08code {font-family:"Courier New", Courier, monospace;}
09</style>
10</head>
11<body>
12<h1>
13<code>div</code>
14</h1>
15<h1>
16<code>Allwhite-space:normal;</code>
17</h1>
18<div style="white-space:normal;width:200px;">Wordwrap still occurs in a td elementthat has its WIDTH attribute set to a value smaller than theunwrapped content of the cell, even if the noWrap property is setto true. Therefore, the WIDTH attribute takes precedence over thenoWrap property in thisscenario</div>
19 
20<h1>
21<code>IE word-wrap : break-word ;</code>
22</h1>
23<div style="word-wrap :break-word ; width:200px;">abcdefghijklmnabcdefghijklmnabcdefghijklmn111111111</div>
24<h1>
25<code>IE word-break:break-all;</code>
26</h1>
27<div style="word-break:break-all;width:200px;">abcdefghijklmnabcdefghijklmnabcdefghijklmn111111111</div>
28<h1>
29<code>Firefox/ word-break:break-all;overflow:auto;</code>
30</h1>
31<div style="word-break:break-all;width:200px; overflow:auto;">abcdefghijklmnabcdefghijklmnabcdefghijklmn111111111</div>
32<h1>
33<code>table</code>
34</h1>
35<h1>
36<code>table-layout:fixed;</code>
37</h1>
38<table style="table-layout:fixed" width="200">
39<tr>
40<td>abcdefghigklmnopqrstuvwxyz1234567890ssssssssssssss</td>
41</tr>
42</table>
43<h1>
44<code>table-layout:fixed; word-break :break-all; word-wrap : break-word;</code>
45</h1>
46<table width="200"style="table-layout:fixed;">
47<tr>
48<td width="25%"style="word-break :break-all; ">abcdefghigklmnopqrstuvwxyz1234567890ssssssssssssss</td>
49<td style="word-wrap :break-word ;">abcdefghigklmnopqrstuvwxyz1234567890ssssssssssssss</td>
50</tr>
51</table>
52<h1>
53<code>FF table-layout:fixed;overflow:hidden;</code>
54</h1>
55<table style="table-layout:fixed" width="200">
56<tr>
57<td width="25%"style="word-break :break-all; overflow:hidden; ">abcdefghigklmnopqrstuvwxyz1234567890</td>
58<td width="75%"style="word-wrap :break-word; overflow:hidden; ">abcdefghigklmnopqrstuvwxyz1234567890</td>
59</tr>
60</table>
61</body>
62</html>

token001
关注
专栏目录
html 破折号自动换行,HTML+CSS 对于英文单词强制换行但不截断单词的解决办法
weixin_33740713的博客
06-03 2859
如何处理长的单词和链接(强制换行,连接符,省略号等)我们在前端开发中经常会遇到一些很长的文本串从它的容器中溢出，例如：通过这样一段css可以有效解决这种问题:.dont-break-out {/* 这两个在技术上是一样的, 为了兼容了浏览器两个都加上 */overflow-wrap: break-word;word-wrap: break-word;-ms-word-break: break-al...
jsx中字符串换行
lee727n的博客
08-20 1871
在jsx中实现字符串换行，首先需要换行的核心属性就是css中的white-space 首先我们先设置样式css .DetailsTitle{ width: 100%; word-wrap: break-word; white-space: pre-wrap; } 为了方便对比，我们写3种实现的方式 <View className='DetailsTitle'>{'1、20210817全流程测试试卷\n2、考试须知
html 字符串自动换行
06-27
html 字符串自动换行html 字符串自动换行
CSS——css 文字自动换行方法
qq_43201350的博客
01-07 2712
CSS——css 文字自动换行方法
CSS笔记
最新发布
2201_76100326的博客
08-12 1775
before定位的基准是其主元素的右上⻆，after定位的基准是主元素的结尾处。当主元素没有内容时before与after仍会正常⼯作，属性为行内元素，若需要设置高宽度等属性需要首先设置为块元素。content是伪元素必需的属性。若伪元素没有内容，需赋值为空格：content: ' ';before与after的主要用途是对元素默认样式的的美化：美化时需要结合定位于内容。⼀般讲主元素设置为position：relative，伪元素设置为position：absolute，以方便对伪元素定位。
[CSS]- 对于一个连在一起很长的字符串，在页面上控制换行
weixin_34260991的博客
12-14 169
很简单的一个属性，我却才知道 当我们页面上的字符串是一个连在一起的字符串，会被默认作为一个单词处理，如果页面上不做控制，很容易顶出我们的布局范围，如下图 我们只需要在控制布局的地方添加下面的属性就阔以控制了 .comments{ word-break: break-all;} 语法： word-break : normal | break-all | keep...
Html+CSS 文本的强制换行
迎难而上
04-01 3万+
作为一个成长的菜鸟，总是不断遇到各种问题，今天博主遇到了一个问题。 对于一般的div 自要设置了width; 如果容器里面的文字过多，则文章就会自动换行， 但是如果输入连续的英文字符，则设置的width 不会生效，容器会被撑开。 如 博主去查了些资料，找到了原因： 一般div超过宽度能换行，原因如下： 对于div,p等块级元素 正常文字的换行(亚洲文字
CSS自动换行、强制不换行、强制断行、超出显示省略号
热门推荐
suwu150
05-31 9万+
CSS样式设置自动换行、强制不换行、强制断行、超出显示省略号 P标签是默认是自动换行的，因此设置好宽度之后，能够较好的实现效果,如下所示,当设置div宽度为固定值时,p中内容能够自动换行: 但是最近的项目中发现，使用ajax加载数据之后，p标签内的内容没有换行，导致布局错乱，于是尝试着使用换行样式，虽然解决了问题，当时获取的数据是一长串的数字，浏览器应该是对数字和英文单词处理方式相近，不会截断。...
css控制文字自动换行的实现方法
09-24
以上内容详细介绍了CSS中关于如何控制文字自动换行的几种实现方法，这在网页布局和排版中非常关键，能够帮助开发者更加精确地控制页面的显示效果，提升用户体验。在实际应用中，需要结合不同浏览器的兼容性来选择...
CSS解决无空格的字母、数字过长不自动换行的问题
12-13
总的来说，理解并正确使用CSS的`word-wrap`和`word-break`属性，可以帮助我们更好地控制文本在页面上的布局，特别是处理那些没有空格或分隔符的长字符串。在实际应用中，根据具体需求和用户体验，灵活选择适合的属性...
CSS样式自动换行（总结）
qq_43437571的博客
07-17 1万+
自动换行问题,正常字符的换行是比较合理的,而连续的数字和英文字符常常将容器撑大,挺让人头疼,下面介绍的是CSS如何实现换行的方法 对于div,p等块级元素 正常文字的换行(亚洲文字和非亚洲文字)元素拥有默认的 white-space:normal ,当定义的宽度之后自动换行 <div id="wrap">正常文字的换行(亚洲文字和非亚洲文字)元素拥有默认的white-space:normal,当定义</div> #wrap { white-space: normal;
css如何实现自动换行、强制换行、强制不换行？
张木期的博客
08-04 7334
首先描述问题，今天写一个项目的时候，由于换行了，导致我的卡片都不对齐了 代码很简单 <div v-for="item in distributedTestBed" :key="item.id" class="mydevice" @click="detailTestBedFun(item)"> <div>资源名称：{{ item.name }}</div> <div class="smalldivi
css如何实现自动换行,CSS实现自动换行的方法
weixin_29982199的博客
08-04 5万+
大家都知道连续的英文或数字能是容器被撑大，不能根据容器的大小自动换行，下面是 CSS如何将他们换行的方法！对于div1、(IE浏览器)white-space:normal; word-break:break-all;这里前者是遵循标准。#wrap{white-space:normal; width:200px; }或者#wrap{word-break:break-all;width:200px;}...
html元素自动换行设置
qq_25775675的博客
05-13 2万+
html自动换行
CSS英文字符串换行（word-break: break-all 或者 word-wrap）
黄彪博客
01-28 2万+
文章参考 英文强制换行css 使用css强制英文单词断行代码 问题描述 在工作中，给表单的某个字段添加描述信息，于是，测试就输入了’dddddd…(500个)’，查看详情的时候，就出现了横向滚动条，这样就不能直观的显示，于是提了bug 解决过程 遇到不换行的问题，第一反应就是设置div的宽度，‘display: inline-block’，甚至尝试了 ‘float:left’，界面效果依然没有变化 请教了同事，说上面的例子是因为浏览器认为’dddddd…(500个)'是一个单词，默认是不会换行的，于
CSS 中几种常用的换行方法
m0_47791238的博客
10-12 3万+
white-space 属性可以控制元素中文本的换行方式。word-break 属性可以控制单词在换行时的断开方式。：允许在单词内部断行，例如超出容器宽度时会将单词拆分为多行显示。（默认值）：文本自动换行，默认情况下会根据容器的大小自动换行。：保留原始的空白符（空格和换行符），文本按照源码中的格式显示。：保留原始的空白符，文本在遇到边界时会自动换行。：合并连续的空白符，文本在遇到边界时会自动换行。：尽量保持多字母语言的连续性，适用于东亚语言。：文本不进行换行，超过容器宽度时会溢出。
【CSS】字符换行的问题
weixin_44707049的博客
05-29 1306
在CSS中，给一个容器设定固定宽度，当里面的文本超过这个宽度时就会被换行处理；但是有一种情况，就是在div中当遇到连续输入的字母时（字母之间没有空格），就会被默认为这是一个英文单词，单词就会一次输出而不进行换行处理。 如果我们想让单词也换行的话，可以给div加上下面这个属性： { 　　word-break:break-all; /*支持IE，chrome，FF不支持*/ } word-break 怎样在单词内断行 可选值 含义 normal（默认值） 使用默认的断行规则，即单词不换行。
html字符过长自动换行css
上善若水
10-25 1829
[code="css"] word-break: break-all; word-wrap: break-word; white-space: normal; width: 125px; [/code]
CSS技巧：跨浏览器自动换行解决方案
"该资源提供了一种通过使用HTML表格和CSS样式来实现同时在Internet Explorer（IE）和Firefox（FF）浏览器中进行自动换行的方法。主要涉及的关键技术点是`table-layout`、`word-wrap`和`word-break`属性。" 在网页...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值