文章/答案/技术大牛

发布

css设置自动换行

CSS 设置自动换行基础概念

CSS（层叠样式表）中的自动换行是指当文本内容超出其容器的宽度时，浏览器会自动将文本换行到下一行。这是网页布局中常见的需求，以确保文本内容的可读性和美观性。

类型

CSS 中实现自动换行的主要属性是 word-wrap 和 overflow-wrap（两者作用相同），以及 white-space。

word-wrap/overflow-wrap：控制是否允许长单词或 URL 地址换行到下一行。
word-wrap/overflow-wrap：控制是否允许长单词或 URL 地址换行到下一行。
white-space：控制文本中的空白符处理方式，以及是否允许文本换行。
white-space：控制文本中的空白符处理方式，以及是否允许文本换行。

应用场景

文本容器：在网页中的段落、标题、列表等文本内容中，经常需要设置自动换行。
响应式设计：在不同设备和屏幕尺寸下，确保文本内容都能良好显示。
长单词或 URL：处理一些无法正常换行的长单词或 URL 地址。

遇到的问题及解决方法

问题：文本没有自动换行

原因：

容器宽度设置过小，导致文本无法换行。
word-wrap 或 white-space 属性未正确设置。

解决方法：

确保容器宽度足够大，或者设置为 auto 或 100%。
设置 word-wrap: break-word 或 white-space: normal。

.container {
  width: 100%;
  word-wrap: break-word;
  white-space: normal;
}

问题：长单词或 URL 没有换行

原因： word-wrap 或 overflow-wrap 属性未设置为 break-word。

解决方法：设置 word-wrap: break-word 或 overflow-wrap: break-word。

.container {
  word-wrap: break-word; /* 或 overflow-wrap: break-word */
}

示例代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS 自动换行示例</title>
  <style>
    .container {
      width: 300px;
      border: 1px solid #000;
      padding: 10px;
      word-wrap: break-word;
      white-space: normal;
    }
  </style>
</head>
<body>
  <div class="container">
    这是一个非常长的单词，例如：supercalifragilisticexpialidocious，它应该会在容器边界处自动换行。
  </div>
</body>
</html>

参考链接

通过以上内容，你应该对 CSS 设置自动换行有了全面的了解，并能解决常见的相关问题。

页面内容是否对你有帮助？

有帮助

没帮助

验证(CSS 3.0)：'word-wrap‘不是已知的CSS属性名称

visual-studio-2010、css

我使用css 3.0来使用自动换行功能，我得到了以下错误。‘验证(CSS 3.0)：’换行‘不是已知的CSS属性名称’。我做什么好？我已经为css3设置了级联版本。

浏览 1提问于2012-03-20得票数 1

1回答

有没有可能根据内容来减小`<span>`上的字体大小？

html、css

跨度在其css stype上设置了字体大小。如果文本太长，文本将溢出或换行。我想知道是否有一种css样式可以使文本适合span的宽度而不换行。我希望css样式禁用span上的font-size，并自动应用新的字体大小来修复内容。

浏览 3提问于2018-04-15得票数 0

2回答

即使在CSS中设置了正文宽度，正文宽度仍在扩展

javascript、html、css

我在CSS部分中设置了HTML页面主体的自动换行属性和宽度，如下所示：如果我在里面写或复制文本，这是很好的如下图所示：但是，当我从MS Word文档中复制一个表格时，它不工作，这意味着当复制的数据通过横跨正文宽度向右扩展时，word不会自动换行。如下图所示：请帮帮忙。

浏览 0提问于2016-02-24得票数 1

2回答

如何在GWT标签中换行很长的文本？

gwt、label、word-wrap

content.setWidth("50px");mainPanel.add(tempPanel);我不想要一个水平滚动条。

浏览 0提问于2010-04-22得票数 4

回答已采纳

4回答

为什么我的html表格'max-width‘不会导致文本换行？

html、css

我想设置列的最大宽度，这样如果文本比最大宽度长，文本应该自动换行到下一行。我尝试使用"max-width:100px"在适当的<td>元素上设置css max-width样式，但不起作用。文本仍然很长，不会自动换行到下一行。有什么想法是错误的或任何解决方案参考代码？我在Windows 7上使用IE 8。

浏览 10提问于2010-04-17得票数 44

回答已采纳

2回答

如何自动调整div的大小，但又不会破坏窗口的边缘？

css、html、width、word-wrap

我有一个纯粹的CSS翻转菜单，显示一个子导航在翻转。我希望该子导航的宽度是任何它需要的内容显示(即我不想硬编码在CSS中的宽度)。但是，如果我不在CSS中硬编码宽度，div就会在窗口边缘中断，内容会自动换行。如果我设置了宽度，我会得到想要的效果(除了div是硬编码的大小)，并且内容不会换行，它只是扩展。有没有办法两者兼得呢？

浏览 2提问于2009-07-27得票数 1

1回答

Angular javascript Primeng growl不会将文本换行到下一行

javascript、html、css、angular、primeng

我只想让它换行到下一行，但它不会这样做。我尝试过很多方法。首先，我尝试修改css。其次，我尝试创建一个div来保存咆哮，并为该div创建一个样式类，将word-wrap设置为break word，将overflow-wrap设置为break-word。最初，我没有用于咆哮的css。我添加的css (如下)可以成功地更改颜色，但似乎自动换行和溢出自动换行不能正常工作。

浏览 28提问于2019-10-05得票数 0

5回答

CSS3中的自动换行

javascript、css、word-wrap

有没有其他方法在div中对文本进行自动换行？我不能在CSS中使用自动换行，因为我只能使用CSS1和一些CSS2。谢谢!

浏览 1提问于2015-05-14得票数 0

1回答

如何为android文本视图(FormattedText)设置“行中断模式”？

android、mono、xamarin.android、textview

有没有办法设置文本视图的换行模式，就像我们对iOS所做的那样。当我为TextView设置文本属性时，它会自动正确地自动换行，但是如果我用SpannableString设置文本，它不会自动换行，而是不使用省略号换行。

浏览 2提问于2013-05-08得票数 0

4回答

如何阻止文本占据超过1行？

html、css、text、word-wrap

是否有自动换行或任何其他属性来阻止文本自动换行？我有一个height和overflow:hidden，但文本仍然断开。需要在所有浏览器中工作，在CSS3之前。

浏览 0提问于2009-02-21得票数 393

回答已采纳

2回答

如何换行<ul><li><div><a></a></div></li></ul>

css、word-wrap、html-lists

当<a>中的文本太长时，我如何才能进行自动换行？我希望<li>扩展到使用CSS的换行。

浏览 1提问于2010-08-10得票数 1

5回答

13,7,5,1,10,7,18,11,17,10,9,16,17,9,6,19,6,13,2,18,6,9,8,5,15,4,17,16,12,8,19,16,5,9,6,16,16,5,16,12,0,14,7,11,12,11,12,16,8,3,16,3,1,10,4,14,5,9,4,3,8,3,0,19,5,7,8,7,13,14,4,3,12,6,5,19,17,3,3,19,0,4,14,8,15,17,14,5,9,3,9,19,18,8,10,0,6,1,18,16,3,16,10,9,15,10,4,7,1,7,11,6,11,16,4,11,10,1,0,15,16,1

浏览 1提问于2012-03-13得票数 5

回答已采纳

1回答

自动换行并不适用于所有单词(?!)

javascript、html、css

如果单个单词太长，以至于即使将单词放在下一行，div宽度也无法容纳它，则该单词将被换行，即以行分隔。换行属性不是应该也适用于我以后的实例吗？有什么解决方案吗？

浏览 9提问于2011-03-04得票数 0

回答已采纳

2回答

使用960 gs将文本溢出到Div

html、css

我正在使用960GS CSS框架，我遇到了从div中溢出文本的问题。如何使文本在达到每个gri的最大像素数后再换行？例如。.grid_4宽度为220 px。Content-Type" content="text/html; charset=utf-8" /> <link href="960.css" rel="stylesheet&qu

浏览 0提问于2012-02-15得票数 0

回答已采纳

5回答

Openpyxl自动高度行

python、openpyxl

我正在尝试设置换行文本。但是当我使用换行时，文本行不会自动改变高度。如何设置自动高行？

浏览 1提问于2016-06-18得票数 16

4回答

奇怪的HTML行包装

javascript、css

我为这个表设置了宽度，我只想要x方向上的溢出。问题是表行(tr)似乎会自动换行。我尝试过使用css overflow-x属性，尝试过操纵表格宽度(在div中)，还尝试过使用css关闭换行。

浏览 2提问于2012-10-20得票数 0

回答已采纳

6回答

从数据库中检索时，以多行显示文本

php、html、css

嗨，我有一个表格，其中我的行包含我从database.But检索的文本，我有一个小宽度的行，我检索的数据是large.And的文本超出了我的行的宽度，所以我想把我检索的数据分成多行，我能做到吗? row.How。我的代码如下：//print_r($list);if(!empty($list))foreach($list as $menu)?> <tr style="border:none; background-color:#FBFBFB

浏览 1提问于2011-03-23得票数 1

回答已采纳

2回答