如何强制将没有任何空白的长字符串包裹起来？

发布于 2024-07-13 04:34:11 字数 267 浏览 6 评论 0原文

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

例如：

ACTGATCGAGCTGAAGCGCAGTGCGATGCTTCGATGATGCTGACGATGCTACGATGCGAGCATCTACGATCAGTCGATGTAGCTAGTAGCATGTAGTGA

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

原文

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

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?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

青萝楚歌 2024-07-20 04:34:11

对于块元素：

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

对于内联元素：

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

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>

回复收藏 0 原文

残龙傲雪 2024-07-20 04:34:11

在您想要允许中断的位置放置零宽度空格。 HTML 中的零宽度空格是。例如：

ACTGATCGAGCTGAAGCGCAGTGCGATGCTTCGATGATGC

回复收藏 0 原文

怀念你的温柔 2024-07-20 04:34:11

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

如何防止长单词被破坏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;

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:

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;

回复收藏 0 原文

夜还是长夜 2024-07-20 04:34:11

对我来说这有效，

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

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

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.

回复收藏 0 原文

古镇旧梦 2024-07-20 04:34:11

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

ACTGATCGAGCTGAAGCGCAGTGCGATGCTTCGATGATGCTGACGATG

这将在行尾（即换行位置）显示一个连字符，这可能是您想要的，也可能不是您想要的。

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

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

ACTGATCGAGCTGAAGCGCAGTGCGATGCTTCGATGATGCTGACGATG

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.

回复收藏 0 原文

破晓 2024-07-20 04:34:11

使用 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 的强制换行混合。

3）我也只是在研究这个，我认为也可能有效（但我需要更完整地测试浏览器支持）：

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

参考：wrapping内容

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

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:

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.

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

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

Reference: wrapping content

回复收藏 0 原文

何其悲哀 2024-07-20 04:34:11

我通过 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/
在那里可以找到一些额外的研究。

My way to go (when there is no appropiate way to insert special chars) via 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.

回复收藏 0 原文

葵雨 2024-07-20 04:34:11

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

回复收藏 0 原文

耳根太软 2024-07-20 04:34:11

使用标签：

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

我认为这比使用零宽度空格更好，后者在复制文本时可能会导致问题。

Use <wbr>tag:

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

I think this is better than using zero-width space which could cause problems when you copy the text.

回复收藏 0 原文

笨死的猪 2024-07-20 04:34:11

如果您使用 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' 参数强制字符串被剪切。

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

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

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

Here's how the the PHP wordwrap function works:

$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.

回复收藏 0 原文

往日情怀 2024-07-20 04:34:11

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

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

回复收藏 0 原文

梦行七里 2024-07-20 04:34:11

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

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

In a case where the table isnt of fixed size, below line worked for me:

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

回复收藏 0 原文

叹倦 2024-07-20 04:34:11

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

示例：

mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm

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

回复收藏 0 原文

一场信仰旅途 2024-07-20 04:34:11

简单地：

word-break: break-word;

Simply:

word-break: break-word;

回复收藏 0 原文

合约呢 2024-07-20 04:34:11

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

.code {
        width: 40vw;
        white-space: pre-wrap; 
        word-break: break-word;
        overflow-wrap: break-word;   
        border    : 1px solid darkgray;
    }

<p class="code">ACTGATCGAGCTGAAGCGCAGTGCGATGCTTCGATGATGCTGACGATGCTACGATGCGAGCATCTACGATCAGTCGATGTAGCTAGTAGCATGTAGTGA</p>

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

Here is the code I come into using white-space: pre-wrap;

.code {
        width: 40vw;
        white-space: pre-wrap; 
        word-break: break-word;
        overflow-wrap: break-word;   
        border    : 1px solid darkgray;
    }

<p class="code">ACTGATCGAGCTGAAGCGCAGTGCGATGCTTCGATGATGCTGACGATGCTACGATGCGAGCATCTACGATCAGTCGATGTAGCTAGTAGCATGTAGTGA</p>

I know the width value is looks odd, you should change it to value fits your needs .

回复收藏 0 原文

高速公鹿 2024-07-20 04:34:11

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

width:100%;
float:left;

just setting width and adding float worked for me :-)

width:100%;
float:left;

回复收藏 0 原文

~没有更多了~

关于作者

始于初秋

暂无简介

0 文章

0 评论

21 人气

关注发私信

友情链接

文江博客

如何强制将没有任何空白的长字符串包裹起来？

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

评论（16）

关于作者

相关话题

热门标签

推荐作者

qq_FjTq5B

18273202778

WordPress小学生

〃温暖了心ぐ

迷乱花海

niuniu

友情链接

如何强制将没有任何空白的长字符串包裹起来？

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

评论（16）

关于作者

相关话题

热门标签

推荐作者

qq_FjTq5B

18273202778

WordPress小学生

〃温暖了心ぐ

迷乱花海

niuniu

友情链接

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。