Html 如何强制包裹没有任何空白的长字符串?

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/499137/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-28 23:10:01  来源:igfitidea点击:

How can I force a long string without any blank to be wrapped?

htmlcssstringxulword-wrap

提问by Pierre

I have a long string (a DNA sequence). It does not contain any whitespace character.

我有一个很长的字符串(一个 DNA 序列)。它不包含任何空白字符。

For example:

例如:

ACTGATCGAGCTGAAGCGCAGTGCGATGCTTCGATGATGCTGACGATGCTACGATGCGAGCATCTACGATCAGTCGATGTAGCTAGTAGCATGTAGTGA

What would be the CSS selector to force this text to be wrapped in a html:textareaor in a xul:textbox?

强制将此文本包装在 ahtml:textarea或 a 中的 CSS 选择器是xul:textbox什么?

回答by heeen

for block elements:

对于块元素:

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

for inline elements:

对于内联元素:

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

回答by Remy Blank

Place zero-width spacesat the points where you want to allow breaks. The zero-width space is &#8203;in HTML. For example:

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

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

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

回答by emik

Here are some very useful answers:

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

How to prevent long words from breaking my div?

如何防止长词破坏我的 div?

to save you time, this can be solved with css:

为了节省您的时间,这可以用 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;

回答by Rani

For me this works,

对我来说这有效,

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

You can also use a div inside another div instead of td. I used overflow:auto, as it shows all the text both in my Opera and IE browsers.

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

回答by Peter Hilton

I don't think you can do this with CSS. Instead, at regular 'word lengths' along the string, insert an HTML soft-hyphen:

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

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

This will display a hyphen at the end of the line, where it wraps, which may or may not be what you want.

这将在行尾显示一个连字符,它环绕的位置可能是您想要的,也可能不是。

Note Safari seems to wrap the long string in a <textarea>anyway, unlike Firefox.

注意 Safari 似乎<textarea>无论如何都将长字符串包装在 a 中,这与 Firefox 不同。

回答by Graeck

Use a CSS method to force wrap a string that has no white-spaces. Three methods:

使用 CSS 方法强制包装没有空格的字符串。三种方法:

1) Use the CSS white-space property. To cover browser inconsistencies, you have to declare it several ways. So just put your looooong string into some block level element (e.g., div, pre, p) and give that element the following 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) use the force-wrap mixin from Compass.

2)使用来自 Compassforce-wrap mixin

3) I was just looking into this as well and I think might also work (but I need to test browser support more completely):

3)我也只是在研究这个,我认为也可以(但我需要更完整地测试浏览器支持):

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

Reference: wrapping content

参考:包装内容

回答by Ben

My way to go (when there is no appropiate way to insert special chars) via CSS:

我的方法(当没有合适的方法插入特殊字符时)通过 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;

As found here: http://kenneth.io/blog/2012/03/04/word-wrapping-hypernation-using-css/with some additional research to be found there.

如此处所示:http: //kenneth.io/blog/2012/03/04/word-wrapping-hypernation-using-css/有一些额外的研究可以在那里找到。

回答by innerurge

For word-wrap:break-word;to work for me, I had to make sure the displaywas set to block, and that the width was set on the element. In Safari, it had to have a ptag and the widthhad to be set in ex.

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

回答by Dave

If you're using PHP then the wordwrap function works well for this: http://php.net/manual/en/function.wordwrap.php

如果您使用的是 PHP,那么 wordwrap 函数可以很好地用于此:http: //php.net/manual/en/function.wordwrap.php

The CSS solution word-wrap: break-word;does not seem to be consistent across all browsers.

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

Other server-side languages have similar functions - or can be hand built.

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

Here's how the the PHP wordwrap function works:

以下是 PHP 自动换行功能的工作原理:

$string = "ACTGATCGAGCTGAAGCGCAGTGCGATGCTTCGATGATGCTGACGATGCTACGATGCGAGCATCTACGATCAGTCGATGTAGCTAGTAGCATGTAGTGA";

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

This wraps the string at 50 characters with a <br> tag. The 'true' parameter forces the string to be cut.

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

回答by Dave

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