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
How can I force a long string without any blank to be wrapped?
提问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:textarea
or 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 ​
in HTML. For example:
在要允许中断的点处放置零宽度空格。零宽度空间​
在 HTML 中。例如:
ACTGATCG​AGCTGAAG​CGCAGTGC​GATGCTTC​GATGATGC
ACTGATCG​AGCTGAAG​CGCAGTGC​GATGCTTC​GATGATGC
回答by emik
Here are some very useful answers:
以下是一些非常有用的答案:
How to prevent long words from breaking my 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­AGCTGAAG­CGCAGTGC­GATGCTTC­GATGATGC­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)使用来自 Compass的force-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 display
was set to block
, and that the width was set on the element. In Safari, it had to have a p
tag and the width
had 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,"<br>",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>