CSS:如何强制将长字符串(没有任何空白)强制包装在XUL和/或HTML中

作者：N个小灰流_701 | 2023-08-31 12:01

如何解决《CSS:如何强制将长字符串(没有任何空白)强制包装在XUL和/或HTML中》经验，为你挑选了8个好方法。

我有一个长串(DNA序列).它不包含任何空格字符.例如:

ACTGATCGAGCTGAAGCGCAGTGCGATGCTTCGATGATGCTGACGATGCTACGATGCGAGCATCTACGATCAGTCGATGTAGCTAGTAGCATGTAGTGA

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

1> heeen..：

对于块元素:

  ACTGATCGAGCTGAAGCGCAGTGCGATGCTTCGATGATGCTGACGATGCTACGATGCGAGCATCTACGATCAGTC




2> Remy Blank..：
在要允许断点的点处放置零宽度空格.零宽度空间是HTML格式.例如:

ACTGATCGAGCTGAAGCGCAGTGCGATGCTTCGATGATGC

        
观察您是否在可能复制和粘贴的内容中执行此操作. 
好建议,我今天学到了新东西,谢谢! 
谢谢你的解决方案.很难在表中找到这样的东西,而这个解决方案是我在IE,Firefox和Chrome中发现的唯一一个. 
您也可以使用``标签,它的作用与提供可选的换行机会相同. 

3> emik..：
以下是一些非常有用的答案:

如何防止长话破坏我的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这是因为它提到了分词:break-all; 这在IE9中对我有用 
这是唯一对我有用的铬 
`word-break:break-all;`是我在Android WebView中唯一有效的. 

4> 小智..：
对我来说这很有效,


  
    LONGTEXTGOESHERELONGDIVGOESLONGTEXTGOESLONGTEXTGOESLONGTEXTGOESLONGTEXTGOESLONGTEXTGOESLONGTEXTGOESLONGTEXTGOESLONGTEXTGOESLONGTEXTGOESLONGTEXTGOESLONGTEXTGOESLONGTEXTGOESLONGTEXTGOESLONGTEXTGOESLONGTEXTGOESLONGTEXTGOESLONGTEXTGOESLONGTEXTGOESLONGTEXTGOESLONGTEXTGOESLONGTEXTGOESLONGTEXTGOESLONGTEXTGOESLONGTEXTGOESLONGTEXTGOESLONGTEXTGOESHERELONGDIVLONGTEXTLONGTEXT
  



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

        

5> Peter Hilton..：
我不认为你可以用CSS做到这一点.相反,沿着字符串的常规"字长",插入一个HTML软连字符:

ACTGATCGAGCTGAAGCGCAGTGCGATGCTTCGATGATGCTGACGATG


这将在行的末尾显示一个连字符,它包裹在哪里,这可能是也可能不是你想要的.

注意Safari似乎</code>无论如何都要包装长字符串,这与Firefox不同.</p></p>
        <br><br><b>6> Graeck..：</b><hr><p>使用CSS方法强制包装没有空格的字符串.三种方法:</p>

<p>1)使用CSS空白属性.要涵盖浏览器的不一致性,您必须以多种方式声明它.所以只需将你的looooong字符串放入某个块级元素(例如div,pre,p),并为该元素提供以下css:</p>

<pre class="brush:bash;">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+ */
}
</pre>

<p>2)使用Compass的force-wrap mixin.</p>

<p>3)我也正在研究这个问题,我认为也可能有用(但我需要更完整地测试浏览器支持):</p>

<pre class="brush:bash;">.break-me {
    word-wrap: break-word;
    overflow-wrap: break-word;
}
</pre>

<p>参考:包装内容</p></p>
        <br><br><b>7> 小智..：</b><hr><p>我的方式(当没有适当的方式来插入特殊字符)通过CSS:</p>

<pre class="brush:bash;">-ms-word-break: break-all;
word-break: break-all;
word-break: break-word;
-webkit-hyphens: auto;
-moz-hyphens: auto;
-ms-hyphens: auto;
hyphens: auto;
</pre>

<p>在这里找到:http://kenneth.io/blog/2012/03/04/word-wrapping-hypernation-using-css/ 
,还有一些额外的研究.</p></p>
        <br><br><b>8> 小智..：</b><hr><p>为了<code>word-wrap:break-word;</code>让我工作,我必须确保<code>display</code>设置为<code>block</code>,并且元素上设置了宽度.在Safari中,它必须有一个<code>p</code>标签,<code>width</code>必须设置<code>ex</code>.</p></p>
            </div>

    <div class="article_ab" style="width: 720px;height: 100px;margin: 0 auto;margin-top: 15px;">

    </div>

    <div class="article_recommend">
        <div class="list_top">推荐阅读</div>
        <div class="ListItems">
            <ul class="NewsList">
                                <li>
                    <div class="NewTitle">
                        <a class="cat" href="/tag/程序员" title="程序员" target="_blank">程序员<i></i></a>
                        <h2><a href="https://devbox.cn/p/Flux_ShiShiFenXi_e89612f2.html" target="_blank" title="Flux实施分析">Flux实施分析</a></h2>
                    </div>

                    <div class="NewsInfo">
                                                <div class="NewsDesc" >
                        如何解决《Flux实施分析》经验，为你挑选了0个好方法。 ...
                        <a href="https://devbox.cn/p/Flux_ShiShiFenXi_e89612f2.html" target="_blank" title="Flux实施分析">[详细]</a>
                    </div>
                    <div style="clear:both"></div>

                </li>


                                <li>
                    <div class="NewTitle">
                        <a class="cat" href="/tag/程序员" title="程序员" target="_blank">程序员<i></i></a>
                        <h2><a href="https://devbox.cn/p/ZaiShiYong_MSVC2_ade06b00.html" target="_blank" title="在使用MSVC 2015构建boost 1.55时指定工具集版本">在使用MSVC 2015构建boost 1.55时指定工具集版本</a></h2>
                    </div>

                    <div class="NewsInfo">
                                                <div class="NewsDesc" >
                        如何解决《在使用MSVC2015构建boost1.55时指定工具集版本》经验，为你挑选了1个好方法。 ...
                        <a href="https://devbox.cn/p/ZaiShiYong_MSVC2_ade06b00.html" target="_blank" title="在使用MSVC 2015构建boost 1.55时指定工具集版本">[详细]</a>
                    </div>
                    <div style="clear:both"></div>

                </li>


                                <li>
                    <div class="NewTitle">
                        <a class="cat" href="/tag/程序员" title="程序员" target="_blank">程序员<i></i></a>
                        <h2><a href="https://devbox.cn/p/JBoss-_RuHeZai_j_fceda5d3.html" target="_blank" title="JBoss-如何在jboss-deployment-structure中排除javax.validation？">JBoss-如何在jboss-deployment-structure中排除javax.validation？</a></h2>
                    </div>

                    <div class="NewsInfo">
                                                <div class="NewsDesc" >
                        如何解决《JBoss-如何在jboss-deployment-structure中排除javax.validation？》经验，为你挑选了1个好方法。 ...
                        <a href="https://devbox.cn/p/JBoss-_RuHeZai_j_fceda5d3.html" target="_blank" title="JBoss-如何在jboss-deployment-structure中排除javax.validation？">[详细]</a>
                    </div>
                    <div style="clear:both"></div>

                </li>


                                <li>
                    <div class="NewTitle">
                        <a class="cat" href="/tag/程序员" title="程序员" target="_blank">程序员<i></i></a>
                        <h2><a href="https://devbox.cn/p/YiZhongFangFaDia_1a0b502e.html" target="_blank" title="一种方法调用,多种可能的错误条件 - 如何在面向对象编程中进行管理？">一种方法调用,多种可能的错误条件 - 如何在面向对象编程中进行管理？</a></h2>
                    </div>

                    <div class="NewsInfo">
                                                <div class="NewsDesc" >
                        如何解决《一种方法调用,多种可能的错误条件-如何在面向对象编程中进行管理？》经验，为你挑选了1个好方法。 ...
                        <a href="https://devbox.cn/p/YiZhongFangFaDia_1a0b502e.html" target="_blank" title="一种方法调用,多种可能的错误条件 - 如何在面向对象编程中进行管理？">[详细]</a>
                    </div>
                    <div style="clear:both"></div>

                </li>


                                <li>
                    <div class="NewTitle">
                        <a class="cat" href="/tag/程序员" title="程序员" target="_blank">程序员<i></i></a>
                        <h2><a href="https://devbox.cn/p/TianJiaShiLiangZ_51310a1b.html" target="_blank" title="添加矢量中相同的值">添加矢量中相同的值</a></h2>
                    </div>

                    <div class="NewsInfo">
                                                <div class="NewsDesc" >
                        如何解决《添加矢量中相同的值》经验，为你挑选了1个好方法。 ...
                        <a href="https://devbox.cn/p/TianJiaShiLiangZ_51310a1b.html" target="_blank" title="添加矢量中相同的值">[详细]</a>
                    </div>
                    <div style="clear:both"></div>

                </li>


                                <li>
                    <div class="NewTitle">
                        <a class="cat" href="/tag/程序员" title="程序员" target="_blank">程序员<i></i></a>
                        <h2><a href="https://devbox.cn/p/RuHeZai_Xcode_Zh_47449303.html" target="_blank" title="如何在Xcode中的UITests之间保持应用程序打开">如何在Xcode中的UITests之间保持应用程序打开</a></h2>
                    </div>

                    <div class="NewsInfo">
                                                <div class="NewsDesc" >
                        如何解决《如何在Xcode中的UITests之间保持应用程序打开》经验，为你挑选了2个好方法。 ...
                        <a href="https://devbox.cn/p/RuHeZai_Xcode_Zh_47449303.html" target="_blank" title="如何在Xcode中的UITests之间保持应用程序打开">[详细]</a>
                    </div>
                    <div style="clear:both"></div>

                </li>


                                <li>
                    <div class="NewTitle">
                        <a class="cat" href="/tag/程序员" title="程序员" target="_blank">程序员<i></i></a>
                        <h2><a href="https://devbox.cn/p/D3_ZhaoDaoXianDe_cbcef8b4.html" target="_blank" title="D3找到线的角度">D3找到线的角度</a></h2>
                    </div>

                    <div class="NewsInfo">
                                                <div class="NewsImg">
                            <a href="https://devbox.cn/p/D3_ZhaoDaoXianDe_cbcef8b4.html" target="_blank" title="D3找到线的角度"><img src="https://img.devbox.cn/3cccf/16086/243/0d081b960db85daf.png" width="120" height="70" alt="D3找到线的角度"/></a>
                        </div>
                                                <div class="NewsDesc" style="width:500px;margin-left:15px;">
                        如何解决《D3找到线的角度》经验，为你挑选了1个好方法。 ...
                        <a href="https://devbox.cn/p/D3_ZhaoDaoXianDe_cbcef8b4.html" target="_blank" title="D3找到线的角度">[详细]</a>
                    </div>
                    <div style="clear:both"></div>

                </li>


                                <li>
                    <div class="NewTitle">
                        <a class="cat" href="/tag/程序员" title="程序员" target="_blank">程序员<i></i></a>
                        <h2><a href="https://devbox.cn/p/YouJianHeBingFuX_95256bd4.html" target="_blank" title="邮件合并复选框形式字段">邮件合并复选框形式字段</a></h2>
                    </div>

                    <div class="NewsInfo">
                                                <div class="NewsDesc" >
                        如何解决《邮件合并复选框形式字段》经验，为你挑选了1个好方法。 ...
                        <a href="https://devbox.cn/p/YouJianHeBingFuX_95256bd4.html" target="_blank" title="邮件合并复选框形式字段">[详细]</a>
                    </div>
                    <div style="clear:both"></div>

                </li>


                                <li>
                    <div class="NewTitle">
                        <a class="cat" href="/tag/程序员" title="程序员" target="_blank">程序员<i></i></a>
                        <h2><a href="https://devbox.cn/p/golang_JiangYiGe_653f549f.html" target="_blank" title="golang将一个字符串添加到切片... interface {}">golang将一个字符串添加到切片... interface {}</a></h2>
                    </div>

                    <div class="NewsInfo">
                                                <div class="NewsDesc" >
                        如何解决《golang将一个字符串添加到切片interface{}》经验，为你挑选了1个好方法。 ...
                        <a href="https://devbox.cn/p/golang_JiangYiGe_653f549f.html" target="_blank" title="golang将一个字符串添加到切片... interface {}">[详细]</a>
                    </div>
                    <div style="clear:both"></div>

                </li>


                                <li>
                    <div class="NewTitle">
                        <a class="cat" href="/tag/程序员" title="程序员" target="_blank">程序员<i></i></a>
                        <h2><a href="https://devbox.cn/p/ShiFouKeYiShiYon_f98ffcc0.html" target="_blank" title="是否可以使用SpriteKit在应用程序上使用Xcode UI Testing？">是否可以使用SpriteKit在应用程序上使用Xcode UI Testing？</a></h2>
                    </div>

                    <div class="NewsInfo">
                                                <div class="NewsDesc" >
                        如何解决《是否可以使用SpriteKit在应用程序上使用XcodeUITesting？》经验，为你挑选了1个好方法。 ...
                        <a href="https://devbox.cn/p/ShiFouKeYiShiYon_f98ffcc0.html" target="_blank" title="是否可以使用SpriteKit在应用程序上使用Xcode UI Testing？">[详细]</a>
                    </div>
                    <div style="clear:both"></div>

                </li>


                                <li>
                    <div class="NewTitle">
                        <a class="cat" href="/tag/程序员" title="程序员" target="_blank">程序员<i></i></a>
                        <h2><a href="https://devbox.cn/p/Jiang_-lt;script_c0a5c9e6.html" target="_blank" title="将<script>中的字符串插入<a href="">">将<script>中的字符串插入<a href=""></a></h2>
                    </div>

                    <div class="NewsInfo">
                                                <div class="NewsDesc" >
                        如何解决《将<script>中的字符串插入<ahref="">》经验，为你挑选了1个好方法。 ...
                        <a href="https://devbox.cn/p/Jiang_-lt;script_c0a5c9e6.html" target="_blank" title="将<script>中的字符串插入<a href="">">[详细]</a>
                    </div>
                    <div style="clear:both"></div>

                </li>


                                <li>
                    <div class="NewTitle">
                        <a class="cat" href="/tag/程序员" title="程序员" target="_blank">程序员<i></i></a>
                        <h2><a href="https://devbox.cn/p/Python_Zhong_sea_76fec317.html" target="_blank" title="Python中seaborn tsplot函数中的标准偏差和误差条">Python中seaborn tsplot函数中的标准偏差和误差条</a></h2>
                    </div>

                    <div class="NewsInfo">
                                                <div class="NewsImg">
                            <a href="https://devbox.cn/p/Python_Zhong_sea_76fec317.html" target="_blank" title="Python中seaborn tsplot函数中的标准偏差和误差条"><img src="https://img.devbox.cn/3cccf/16086/243/01c11a9512977c76.png" width="120" height="70" alt="Python中seaborn tsplot函数中的标准偏差和误差条"/></a>
                        </div>
                                                <div class="NewsDesc" style="width:500px;margin-left:15px;">
                        如何解决《Python中seaborntsplot函数中的标准偏差和误差条》经验，为你挑选了2个好方法。 ...
                        <a href="https://devbox.cn/p/Python_Zhong_sea_76fec317.html" target="_blank" title="Python中seaborn tsplot函数中的标准偏差和误差条">[详细]</a>
                    </div>
                    <div style="clear:both"></div>

                </li>


                                <li>
                    <div class="NewTitle">
                        <a class="cat" href="/tag/程序员" title="程序员" target="_blank">程序员<i></i></a>
                        <h2><a href="https://devbox.cn/p/WoKeYiShiYong_Te_3636e3e5.html" target="_blank" title="我可以使用TensorFlow测量单个操作的执行时间吗？">我可以使用TensorFlow测量单个操作的执行时间吗？</a></h2>
                    </div>

                    <div class="NewsInfo">
                                                <div class="NewsImg">
                            <a href="https://devbox.cn/p/WoKeYiShiYong_Te_3636e3e5.html" target="_blank" title="我可以使用TensorFlow测量单个操作的执行时间吗？"><img src="https://img.devbox.cn/3cccf/16086/243/8e839f523b770d1d.png" width="120" height="70" alt="我可以使用TensorFlow测量单个操作的执行时间吗？"/></a>
                        </div>
                                                <div class="NewsDesc" style="width:500px;margin-left:15px;">
                        如何解决《我可以使用TensorFlow测量单个操作的执行时间吗？》经验，为你挑选了5个好方法。 ...
                        <a href="https://devbox.cn/p/WoKeYiShiYong_Te_3636e3e5.html" target="_blank" title="我可以使用TensorFlow测量单个操作的执行时间吗？">[详细]</a>
                    </div>
                    <div style="clear:both"></div>

                </li>


                                <li>
                    <div class="NewTitle">
                        <a class="cat" href="/tag/程序员" title="程序员" target="_blank">程序员<i></i></a>
                        <h2><a href="https://devbox.cn/p/LeiXingDongHuaSh_070362ea.html" target="_blank" title="类型动画师的预期资源[ResourceType]">类型动画师的预期资源[ResourceType]</a></h2>
                    </div>

                    <div class="NewsInfo">
                                                <div class="NewsDesc" >
                        如何解决《类型动画师的预期资源[ResourceType]》经验，为你挑选了1个好方法。 ...
                        <a href="https://devbox.cn/p/LeiXingDongHuaSh_070362ea.html" target="_blank" title="类型动画师的预期资源[ResourceType]">[详细]</a>
                    </div>
                    <div style="clear:both"></div>

                </li>


                                <li>
                    <div class="NewTitle">
                        <a class="cat" href="/tag/程序员" title="程序员" target="_blank">程序员<i></i></a>
                        <h2><a href="https://devbox.cn/p/Jekyll-_Zai_SCSS_fa0b3d38.html" target="_blank" title="Jekyll：在SCSS部分中使用_config.yml中的值">Jekyll：在SCSS部分中使用_config.yml中的值</a></h2>
                    </div>

                    <div class="NewsInfo">
                                                <div class="NewsDesc" >
                        如何解决《Jekyll：在SCSS部分中使用_config.yml中的值》经验，为你挑选了1个好方法。 ...
                        <a href="https://devbox.cn/p/Jekyll-_Zai_SCSS_fa0b3d38.html" target="_blank" title="Jekyll：在SCSS部分中使用_config.yml中的值">[详细]</a>
                    </div>
                    <div style="clear:both"></div>

                </li>


                                <li>
                    <div class="NewTitle">
                        <a class="cat" href="/tag/程序员" title="程序员" target="_blank">程序员<i></i></a>
                        <h2><a href="https://devbox.cn/p/RuHeShiYong_Http_8f2b338e.html" target="_blank" title="如何使用HttpsUrlConnection而不是DefaultHttpClient">如何使用HttpsUrlConnection而不是DefaultHttpClient</a></h2>
                    </div>

                    <div class="NewsInfo">
                                                <div class="NewsDesc" >
                        如何解决《如何使用HttpsUrlConnection而不是DefaultHttpClient》经验，为你挑选了3个好方法。 ...
                        <a href="https://devbox.cn/p/RuHeShiYong_Http_8f2b338e.html" target="_blank" title="如何使用HttpsUrlConnection而不是DefaultHttpClient">[详细]</a>
                    </div>
                    <div style="clear:both"></div>

                </li>


                                <li>
                    <div class="NewTitle">
                        <a class="cat" href="/tag/程序员" title="程序员" target="_blank">程序员<i></i></a>
                        <h2><a href="https://devbox.cn/p/ShiYong_RxAndroi_c3eceb33.html" target="_blank" title="使用RxAndroid安排">使用RxAndroid安排</a></h2>
                    </div>

                    <div class="NewsInfo">
                                                <div class="NewsDesc" >
                        如何解决《使用RxAndroid安排》经验，为你挑选了1个好方法。 ...
                        <a href="https://devbox.cn/p/ShiYong_RxAndroi_c3eceb33.html" target="_blank" title="使用RxAndroid安排">[详细]</a>
                    </div>
                    <div style="clear:both"></div>

                </li>


                                <li>
                    <div class="NewTitle">
                        <a class="cat" href="/tag/程序员" title="程序员" target="_blank">程序员<i></i></a>
                        <h2><a href="https://devbox.cn/p/RuHeZai_Python_Z_e72753a0.html" target="_blank" title="如何在Python中创建类的不同实例？">如何在Python中创建类的不同实例？</a></h2>
                    </div>

                    <div class="NewsInfo">
                                                <div class="NewsDesc" >
                        如何解决《如何在Python中创建类的不同实例？》经验，为你挑选了1个好方法。 ...
                        <a href="https://devbox.cn/p/RuHeZai_Python_Z_e72753a0.html" target="_blank" title="如何在Python中创建类的不同实例？">[详细]</a>
                    </div>
                    <div style="clear:both"></div>

                </li>


                                <li>
                    <div class="NewTitle">
                        <a class="cat" href="/tag/程序员" title="程序员" target="_blank">程序员<i></i></a>
                        <h2><a href="https://devbox.cn/p/RuHeShiYong_-tra_6aca554c.html" target="_blank" title="如何使用.translate()从Python 3.x中的字符串中删除标点符号？">如何使用.translate()从Python 3.x中的字符串中删除标点符号？</a></h2>
                    </div>

                    <div class="NewsInfo">
                                                <div class="NewsDesc" >
                        如何解决《如何使用.translate()从Python3.x中的字符串中删除标点符号？》经验，为你挑选了3个好方法。 ...
                        <a href="https://devbox.cn/p/RuHeShiYong_-tra_6aca554c.html" target="_blank" title="如何使用.translate()从Python 3.x中的字符串中删除标点符号？">[详细]</a>
                    </div>
                    <div style="clear:both"></div>

                </li>


                                <li>
                    <div class="NewTitle">
                        <a class="cat" href="/tag/程序员" title="程序员" target="_blank">程序员<i></i></a>
                        <h2><a href="https://devbox.cn/p/JmeterMarshalExc_4f238051.html" target="_blank" title="Jmeter MarshalException:错误编组参数">Jmeter MarshalException:错误编组参数</a></h2>
                    </div>

                    <div class="NewsInfo">
                                                <div class="NewsDesc" >
                        如何解决《JmeterMarshalException:错误编组参数》经验，为你挑选了0个好方法。 ...
                        <a href="https://devbox.cn/p/JmeterMarshalExc_4f238051.html" target="_blank" title="Jmeter MarshalException:错误编组参数">[详细]</a>
                    </div>
                    <div style="clear:both"></div>

                </li>


                

            </ul>
        </div>
    </div>

    <div class="article_cmnt" style="display: none;">
        <div class="cmnt_title">吐了个 "CAO" !</div>
        <form action="" method="post">
            <div class="cmnt_text">
                <textarea class="ping-txt" onfocus="ck_txt(this);" onblur="ck_txt2(this);" id="ping-txt" name="ping-txt" >吐个槽吧,看都看了


            
                
                                        会员登录 | 用户注册