213

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

例如：

ACTGATCGAGCTGAAGCGCAGTGCGATGCTTCGATGATGCTGACGATGCTACGATGCGAGCATCTACGATCAGTCGATGTAGCTAGTAGCATGTAGTGA

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

4

16 回答 16

303

对于块元素：

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

对于内联元素：

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

于 2009-01-31T16:53:49.427 回答
111

在要允许中断的点处放置零宽度空格。零宽度空间&#8203;在 HTML 中。例如：

ACTGATCG&#8203;AGCTGAAG&#8203;CGCAGTGC&#8203;GATGCTTC&#8203;GATGATGC

于 2009-04-18T19:33:22.003 回答
48

以下是一些非常有用的答案：

如何防止长词破坏我的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;
于 2013-08-28T09:30:41.493 回答
20

对我来说，这有效，

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

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

于 2010-07-13T04:52:09.773 回答
12

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

ACTGATCG&shy;AGCTGAAG&shy;CGCAGTGC&shy;GATGCTTC&shy;GATGATGC&shy;TGACGATG

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

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

于 2009-01-31T17:08:23.517 回答
12

使用 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) 使用Compass 中的 force-wrap mixin。

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

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

参考：包装内容

于 2013-02-14T01:13:14.200 回答
8

我的方式（当没有适当的方式插入特殊字符时）通过 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/ 在那里可以找到一些额外的研究。

于 2014-09-16T13:35:59.383 回答
5

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

于 2010-12-07T20:09:20.933 回答
3

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

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

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

下面是 PHP 自动换行函数的工作原理：

$string = "ACTGATCGAGCTGAAGCGCAGTGCGATGCTTCGATGATGCTGACGATGCTACGATGCGAGCATCTACGATCAGTCGATGTAGCTAGTAGCATGTAGTGA";

$wrappedstring = wordwrap($string,50,"&lt;br&gt;",true);

这使用 <br> 标记将字符串包装为 50 个字符。'true' 参数强制字符串被剪切。

于 2011-01-04T11:25:33.397 回答
3 
<textarea style="width:100px; word-wrap:break-word;">
  place your text here
</textarea>
于 2015-08-12T06:50:21.543 回答
3

使用<wbr>标签：

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

我认为这比使用零宽度空间要好&#8203;，这可能会在复制文本时引起问题。

于 2017-09-05T07:14:47.453 回答
2

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

style="width:110px; word-break: break-all;"
于 2016-10-31T17:10:35.107 回答
2

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

例子：

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

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

于 2021-03-02T18:46:44.087 回答
1

只是设置width和添加float对我有用:-)

width:100%;
float:left;
于 2014-02-07T06:18:37.763 回答
0

这是我开始使用的代码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 value 看起来很奇怪，您应该将其更改为 value 适合您的需求。

于 2021-10-13T16:14:14.097 回答
0

简单地：

word-break: break-word;
于 2021-12-07T19:01:25.277 回答