如何在CSS和HTML中断开长单词

在CSS和HTML中断开长单词可以使用CSS的word-break属性和overflow-wrap属性来实现。

word-break属性用于指定在何处断开单词。常用的取值有：
- normal：默认值，单词不会被断开。
- break-all：允许在任意字符内断开单词。
- keep-all：只在允许的断字点（如空格）处断开单词。

overflow-wrap属性用于指定当单词过长无法完全显示时如何换行。常用的取值有：
- normal：默认值，不允许在单词内部断行。
- break-word：允许在单词内部断行，但优先在单词间断行。

以下是一个示例代码：

<!DOCTYPE html>
<html>
<head>
  <style>
    .long-word {
      word-break: break-all;
      overflow-wrap: break-word;
    }
  </style>
</head>
<body>
  <p class="long-word">Thisisaverylongwordthatneedstobebrokenintomultiplelines.</p>
</body>
</html>

在上述示例中，使用了.long-word类来应用word-break和overflow-wrap属性。这样，长单词将会在适当的位置断开，并在需要时换行显示。

腾讯云相关产品和产品介绍链接地址：

如何在CSS和HTML中断开长单词

、

所以基本上我是把html转换成pdf。所以一切都运行得很好。但是长词在我的桌子上是不会分解的。请帮助我分解td中的长单词。我已经创建了td类，在那里我试图打破单词。但它似乎不起作用。请帮帮忙。

浏览 14提问于2019-02-07得票数 0

回答已采纳

1回答

CSS宽度问题(页面溢出)

、、

我有个CSS问题。我在努力阻止文本从页面上溢出。我在我的css代码中添加了宽度，但它不能正常工作。有人能帮帮我吗。它在做什么， <div class="contents"> <div class="mt5"></div> $(&

浏览 2提问于2015-04-27得票数 0

回答已采纳

2回答

表格宽度是否大于指定的像素？

、、、

这是我的html，但是当我测量最后一个td时，它的方式比300px...any更长？

浏览 0提问于2011-02-09得票数 3

回答已采纳

2回答

注释系统CSS文本开箱即用

、

</div> "; }} CSS

浏览 1提问于2013-03-08得票数 2

回答已采纳

2回答

css断字与连字符

、

我想在第一行末尾用连字符断开这个长单词。期望值：RUMBERUFSBILDUNGSZENT下面是我的html和css： <div class="content">BERUFSBILDUNGSZENTRUM

浏览 6提问于2017-03-09得票数 13

回答已采纳

2回答

chrome在html源代码中用'-‘将单词包装起来

、、

一个带有'-‘的长单词可能会被封装在chrome的HTML源代码中。例如，我有一个很长的单词myfatherwasaself-taughtaaaaaaaaaaaaaaaaaaaa....aaaaaaa.在Chrome中，该词在源代码和呈现的html中都会在'-‘处断开，但在Edge中，该词可以正确显示。这个数字可能会更清楚。

浏览 3提问于2016-10-21得票数 0

4回答

在PHP中拆分一行文本，没有任何明显的断点

、、

我有一个PHP函数来捕获长的URL并修剪它们，这样它们就不会破坏我网站的格式。如果有破折号，我尝试过的东西都可以工作(我在一些函数中也尝试过 )，但是它们都不会影响上面的内容。这是为了一个论坛，这是最后一点用户输入，我无法停止破坏我的网站！提前感谢您的帮助。

浏览 0提问于2011-07-12得票数 2

回答已采纳

1回答

第一个单词后换行

、

如何在css或html中将按钮链接的第一个单词后的行断开。所以举个例子：我们的这包含在一个链接中，该链接被绑定到我的css文件中的一个类，使其具有漂亮的按钮外观。有5个按钮在一排，所有都需要有这个。我试过使用填充和<br/>，但根本不起作用。 <a href="story.php" class="button_nav&q

浏览 2提问于2012-07-08得票数 2

回答已采纳

2回答

强制对描述小部件进行换行

、、

我正在尝试在XUL应用程序中获取要包装的描述，即使它包含很长的行。<?xml-stylesheet href="chrome://global/skin/" type="text/css"?overflow: auto;" xmlns="http://www.mozilla.org/k

浏览 0提问于2009-01-07得票数 2

回答已采纳

6回答

用元素中的单词在空格后强制行中断。

、、、、

我有一个表格/网格视图，在<td>中有两个单词，比如"C2 Sunday"。我想在C2之后分开一条线，看起来，Sunday请帮我这个忙。

浏览 10提问于2015-03-11得票数 1

回答已采纳

1回答

使用CSS在HTML中使用Windows样式图标和文件名

、

我想实现样式，如窗口图标和文件名在HTML使用CSS。检查附加图像。在下面的例子中，文件名是长的，里面没有空格，但是它显示得很好。文件名：robot_circuits_computer_technology_desktop_1680x1050_hd-wallpaper-967920.jpg

浏览 3提问于2014-02-09得票数 2

3回答

如何在CSS中换行或拆分已经包含多个连字符的单词？

、、、

我正在寻找包装或断开具有多个连字符的单词，如"face- to -face“或"all- or -nothing”。在HTML中，这类单词和表达似乎不会自然中断。当我尝试不同的组合时，唯一成功的就是断字: break -all，但它不会用连字符断开单词，而且通常会将一个字母单独放在一行上。

浏览 24提问于2020-08-28得票数 1

4回答

单词中的分词

、

我有这个html <div class="container"> <div class="element noWrap">:-)<

浏览 0提问于2012-12-20得票数 5

回答已采纳

2回答

在HTML，CSS

、

在HTML / CSS中单词的长度可以改变。我怎样才能用CSS实现它呢？请告诉我..。

浏览 4提问于2020-02-13得票数 2

回答已采纳

3回答

如何将文本从一行拆分到我列表中的另一行

、、、

我现在面临的唯一问题是切断下一行的长字符串。我用的是单词包装，但它不管用。所以，当我输入一个非常长的单词(Helooooooooooooooooooooooooooooooo)等，我希望它打破这个单词，并显示在下一行，如 -) <div id="Item</span> <button class="delete_item hidden"><&

浏览 3提问于2013-10-04得票数 0

回答已采纳

3回答

关于HTML小部件，我遇到了一件有趣的事情。问题是..。所以我的问题是..。是否有可能让小部件被片段剪掉，而不是让它本身变得更宽？与Swing相比，我的意思是当单词包装结束时，类似于JTextArea的效果(见图)。我尝试使用css word-break: break-all;，这里是代码：public MyTestUI(){//constructor html.setStyleName(

浏览 2提问于2012-12-13得票数 0

1回答

WebView自动换行:断开字

、、、、

我在WebView中显示一个很长的非常长的单词时遇到了问题。我不想水平滚动和放大/缩小。我只想让单词在必要时断开(就像<body style="word-wrap: break-word;">一样)。这是我的简单html： <head> <meta http-equiv="Content-Type"

浏览 0提问于2016-11-10得票数 0

3回答

为什么当文本区域超过宽度时，文本区域会打破长单词(为什么不区分长单词)？

、、、

假设我有两个盒子：div.box和textarea.box，每个盒子都有相同的宽度和高度。每一个都有相同的文本，包括一个非常长的单词，然后是一系列简短的单词。该设置可能如下所示：.box { height: 100px;HTML:looooooooooooooooooooooooooooooooooooooooooooooooooooooo

浏览 0提问于2013-02-12得票数 5

回答已采纳

1回答

特定词之间的强制转接

、

我正在建设一个网站，我有一个标题，其中包括一个长的第一个词和两个较短的词。如果屏幕足够宽，如果屏幕或容器对所有三个单词都太窄，我希望这个标题适合一行，以便在第一个和第二个之间，而不是第二个和第三个单词之间分开。也就是说，我想要这个：short shortLooooooong short我如何在HTML

浏览 0提问于2015-07-06得票数 2

回答已采纳

4回答

Firefox分词功能在任意位置对短词进行分词

、

我正在break-word一个容器，这样非常长的单词就不会溢出。虽然Chrome和Safari很好地处理了这个问题，但似乎Firefox和IE喜欢随意拆分单词-即使是简短的单词，在最荒谬的地方也是如此。break-all;-webkit-hyphens: auto;hyphens: auto;这是我用于容器和文本的CSSdouble #f7f7f7; display: bl

浏览 2提问于2013-01-07得票数 9

回答已采纳

点击加载更多