如何强制缠绕没有任何空白的长字符串？

Posted 2023-02-19

【中文标题】如何强制缠绕没有任何空白的长字符串？

【英文标题】：How can I force a long string without any blank to be wrapped?

【发布时间】：2010-10-04 16:33:27

【问题描述】：

我有一个长字符串（DNA 序列）。它不包含任何空白字符。

例如：

ACTGATCGAGCTGAAGCGCAGTGCGATGCTTCGATGATGCTGACGATGCTACGATGCGAGCATCTACGATCAGTCGATGTAGCTAGTAGCATGTAGTGA

什么是 CSS 选择器来强制将此文本包裹在 html:textarea 或 xul:textbox 中？

【问题讨论】：

具有讽刺意味的是，字符串也没有在 Stack Overflow 中中断...

【参考方案1】：

简单地说：

word-break: break-word;

【参考方案2】：

这是我使用white-space: pre-wrap;的代码

.code 
    width: 90vw;
    white-space: pre-wrap;
    font-family: inherit;
    word-break: break-word;
    overflow-wrap: break-word;
    line-break: auto;

我知道 with 值看起来很奇怪，您应该将其更改为适合您需要的值。

【参考方案3】：

如果您使用 Bootstrap，最好的情况是使用此类“text-break”。

例子：

<p class="text-break">mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm</p>

更多信息你应该在官方 Bootstrap 文档页面中获得

【参考方案4】：

对于块元素：

<textarea style="width:100px; word-wrap:break-word;">
  ACTGATCGAGCTGAAGCGCAGTGCGATGCTTCGATGATGCTGACGATGCTACGATGCGAGCATCTACGATCAGTC
</textarea>

对于内联元素：

<span style="width:100px; word-wrap:break-word; display:inline-block;"> 
   ACTGATCGAGCTGAAGCGCAGTGCGATGCTTCGATGATGCTGACGATGCTACGATGCGAGCATCTACGATCAGTC
</span>

【讨论】：

仅在 IE、Safari 和 FF3.1 (alpha) 中支持。

这仅适用于新一波浏览器 - 请参阅 caniuse.com/#search=word-break

@Michael：答案使用“word-wrap”规则，而不是“word-break”规则；前者在今天使用的almost every browser 中得到支持。在指示“部分支持”的情况下，“自动换行”规则的“断词”值似乎仍然可行。

该属性已重命名为 overflow-wrap，因为在标准中，但 wrod-wrap 已被广泛实施。

也适用于“显示：表格单元”，在我的情况下是必要的

【参考方案5】：

使用<wbr>标签：

ACTGATCG<wbr>AGCTGAAG<wbr>CGCAGTGC<wbr>GATGCTTC<wbr>GATGATGC

我认为这比使用零宽度空间​ 更好，因为这可能会在您复制文本时引起问题。

【参考方案6】：

在表格不是固定大小的情况下，下面的行对我有用：

style="width:110px; word-break: break-all;"

【参考方案7】：

只需设置 width 并添加 float 对我有用 :-)

width:100%;
float:left;

【讨论】：

这是一个完整而简单的答案，我认为最初发布此问题的人应该使用 width:100%;带浮动：左；在包含该字符串的元素上，他的问题将得到解决。那为什么这个答案不相关？

因为发布此问题的那个人认为您的解决方案在五年前行不通。

是的，但是这个论坛不仅仅是关于那个人的，它只是关于这个论坛的，今天像我这样面临类似问题的其他人也可以从中受益。

【参考方案8】：

<textarea style="width:100px; word-wrap:break-word;">
  place your text here
</textarea>

【参考方案9】：

我的方式（当没有适当的方式插入特殊字符时）通过 CSS：

-ms-word-break: break-all;
word-break: break-all;
word-break: break-word;
-webkit-hyphens: auto;
-moz-hyphens: auto;
-ms-hyphens: auto;
hyphens: auto;

在这里找到：http://kenneth.io/blog/2012/03/04/word-wrapping-hypernation-using-css/ 在那里可以找到一些额外的研究。

【参考方案10】：

如果您使用的是 php，那么 wordwrap 函数可以很好地解决这个问题： http://php.net/manual/en/function.wordwrap.php

CSS 解决方案word-wrap: break-word; 似乎并非在所有浏览器中都保持一致。

其他服务器端语言具有类似的功能 - 或者可以手工构建。

PHP 自动换行功能的工作原理如下：

$string = "ACTGATCGAGCTGAAGCGCAGTGCGATGCTTCGATGATGCTGACGATGCTACGATGCGAGCATCTACGATCAGTCGATGTAGCTAGTAGCATGTAGTGA";

$wrappedstring = wordwrap($string,50,"<br>",true);

这用 标记将字符串包装在 50 个字符处。 'true' 参数强制字符串被剪切。

【讨论】：

您可以将此解决方案与 Remy 的解决方案混合以插入零宽度空格： wordwrap ($longtext, 5, "​", true);

【参考方案11】：

这里有一些非常有用的答案：

How to prevent long words from breaking my div?

为了节省你的时间，这可以用 css 解决：

white-space: -moz-pre-wrap; /* Mozilla */
white-space: -hp-pre-wrap; /* HP printers */
white-space: -o-pre-wrap; /* Opera 7 */
white-space: -pre-wrap; /* Opera 4-6 */
white-space: pre-wrap; /* CSS 2.1 */
white-space: pre-line; /* CSS 3 (and 2.1 as well, actually) */
word-wrap: break-word; /* IE */
word-break: break-all;

【讨论】：

+1 这是因为它提到了 word-break:break-all;在 IE9 中对我有用

word-break: break-all; 是我唯一在 android WebView 中工作的人。

感谢word-break: break-all;！

直到有一个-hp- 前缀！

【参考方案12】：

为了让word-wrap:break-word; 为我工作，我必须确保将display 设置为block，并且在元素上设置了宽度。在 Safari 中，它必须有一个 p 标记，并且 width 必须在 ex 中设置。

【参考方案13】：

使用 CSS 方法强制换行没有空格的字符串。三种方法：

1) 使用 CSS white-space 属性。要涵盖浏览器的不一致，您必须以多种方式声明它。因此，只需将您的 looooong 字符串放入某个块级元素（例如 div、pre、p）并为该元素赋予以下 css：

some_block_level_tag 
    white-space: pre;           /* CSS 2.0 */
    white-space: pre-wrap;      /* CSS 2.1 */
    white-space: pre-line;      /* CSS 3.0 */
    white-space: -pre-wrap;     /* Opera 4-6 */
    white-space: -o-pre-wrap;   /* Opera 7 */
    white-space: -moz-pre-wrap; /* Mozilla */
    white-space: -hp-pre-wrap;  /* HP Printers */
    word-wrap: break-word;      /* IE 5+ */

2) 使用force-wrap mixin from Compass。

3) 我也在研究这个，我认为也可以工作（但我需要更完整地测试浏览器支持）：

.break-me 
    word-wrap: break-word;
    overflow-wrap: break-word;

参考：wrapping content

【讨论】：

是的，#3 适用于所有现代浏览器，甚至旧版 IE6+。

#3 仅在有机会被文字打破时才有效。过长的字符串不会中断（在 Chrome 52.0.2743.82 上测试）。

【参考方案14】：

对我来说这是可行的，

<td  style="word-wrap:break-word;">
  <div style="width:140px;overflow:auto">
    LONGTEXTGOESHERELONGDIVGOESLONGTEXTGOESLONGTEXTGOESLONGTEXTGOESLONGTEXTGOESLONGTEXTGOESLONGTEXTGOESLONGTEXTGOESLONGTEXTGOESLONGTEXTGOESLONGTEXTGOESLONGTEXTGOESLONGTEXTGOESLONGTEXTGOESLONGTEXTGOESLONGTEXTGOESLONGTEXTGOESLONGTEXTGOESLONGTEXTGOESLONGTEXTGOESLONGTEXTGOESLONGTEXTGOESLONGTEXTGOESLONGTEXTGOESLONGTEXTGOESLONGTEXTGOESLONGTEXTGOESHERELONGDIVLONGTEXTLONGTEXT
  </div>
</td>

您也可以在另一个 div 中使用一个 div，而不是 td。我使用了overflow:auto，因为它显示了我的 Opera 和 IE 浏览器中的所有文本。

【讨论】：

这对我不起作用。我必须将“自动换行”属性移动到 div 中并删除“溢出”属性。有了这些变化，就可以工作了。

【参考方案15】：

将zero-width spaces 放置在您希望允许休息的位置。 HTML 中的零宽度空间是​。例如：

ACTGATCG​AGCTGAAG​CGCAGTGC​GATGCTTC​GATGATGC

【讨论】：

感谢您的解决方案。很难让这样的东西在表格中工作，而这个解决方案是我发现的唯一一个适用于 IE、Firefox 和 Chrome 的解决方案。

+1，这会更好，因为它涵盖了更多案例，即使问题是针对更具体的案例。

您也可以使用<wbr> 标签，其目的与提供可选换行机会的目的相同。

注意你是否在可能被复制和粘贴的东西中这样做。

Regex \s（空格），与零宽度空格不匹配。如果要删除它们，则需要显式编写/\u200B/g 或类似名称。见developer.mozilla.org/en-US/docs/Web/javascript/Reference/…

【参考方案16】：

我认为你不能用 CSS 做到这一点。相反，在字符串的常规“字长”处，插入一个 HTML 软连字符：

ACTGATCG­AGCTGAAG­CGCAGTGC­GATGCTTC­GATGATGC­TGACGATG

这将在行尾显示一个连字符，它在哪里换行，这可能是也可能不是你想要的。

注意 Safari 似乎将长字符串包装在 <textarea> 中，这与 Firefox 不同。

【讨论】：

哇，甚至都不知道。整洁！

我也不知道。双重整洁！