¿Por qué no se rompe el trabajo de palabras en una cadena larga con comas?

Tengo una cadena larga delimitada por comas y estoy tratando de usar el estilo word-wrap de css style: palabra de corte pero no parece funcionar en una cadena sin espacios. Es esto esperado?¿Por qué no se rompe el trabajo de palabras en una cadena larga con comas?

Mi mesa se ve así:

<table class="table table-striped" style="margin-top:20px;background-color:#f2f2f2;"> 
    <tbody> 
    <tr> 
     <td width="150px" valign="top" style="white-space:nowrap;"><b>Favorite Activities:</b></td> 
     <td width="50px" style="word-wrap:break-word;">some,really,really,long,long,string,with,out,any,spaces,just,a,comma,delimited,list</td> 
    </tr> 
    </tbody> 
</table>

¿Hay arounds de trabajo para esto?

Fuente

2012-09-24 Paul

No creo que un navegador sepa qué es una palabra y qué no. Para, todo, él, sabe, esto, podría, ser, uno, largo, legítimo, palabra. Si se divide en pedazos separados, estaría violando el comportamiento estándar. –

word-wrap:break-word; sigue siendo experimental, por lo que diferentes navegadores pueden soportarlo o no.

Si tiene lata, inserte un espacio de ancho cero después de las comas. Es U + 200B en Unicode, o  en HTML. El navegador romperá la cadena en el espacio de ancho cero según lo necesite. Probablemente puedas hacer eso en cualquier código que esté produciendo el HTML, o escribir algunos javascript para insertar automáticamente el personaje.

Véase también Wikipedia.

Fuente

2012-09-25 00:06:55 Michael

+1: ¡Muy inteligente! –

Esto no funciona en un ..pero agregar un espacio al texto después de una coma .... yourstring.replace (/,/g, ','); – <span class="text-secondary"> <small> <a rel="noopener" target="_blank" href="https://stackoverflow.com/users/329367/">Darren</a></span> <span></span> </small> </span> </p> </div> </div> </div> <div itemprop="comment" class="post-comment"> <div class="row"> <div class="col-lg-1"><span class="text-secondary">+1</span></div> <div class="col-lg-11"> <p class="commenttext">Después de leer su respuesta y la respuesta de @banzomaikaka, parece que la dirección en la que W3C preferiría vernos ir es usar un carácter de guión 'suave' en lugar de un espacio en blanco invisible.https: //developer.mozilla.org/en-US/ docs/Web/CSS/hyphens # Suggesting_line_break_opportunities – <span class="text-secondary"> <small> <span></span> </small> </span> </p> </div> </div> </div> </div> </div> </article> <div> <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-6208739752673518" data-ad-slot="1038284119" data-ad-format="auto" data-full-width-responsive="true"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div> <article class="board-top-1 padding-top-10"> <div class="post-col vote-info"> <span class="count">3<i class="fa fa-thumbs-up"></i></span> </div> <div class="post-offset"> <div class="answer fmt"> <p>Más una respuesta de Michael para su solución alternativa.</p> <p>Sin embargo, he probado la propiedad de ajuste de texto en algunos navegadores (versiones recientes de safari, ff, chrome) y parece que ya es estable (Acabo de leer que también funciona en la última versión Versiones de IE). Lo que parece molestar a la cosa en su ejemplo Paul, es usarlo dentro de una celda de tabla (y cualquier elemento con pantalla: celda de tabla). En un div (con display: block), por ejemplo, funciona perfectamente bien.</p> <p>Echa un vistazo a este violín. Perder el tiempo con él y usted se dará cuenta de lo mismo: <a href="http://jsfiddle.net/joplomacedo/DQmJB/" rel="nofollow noreferrer">http://jsfiddle.net/joplomacedo/DQmJB/</a></p> <p><strong>Editar:</strong><br> Me acabo de encontrar esto ya ha sido contestada en un <a href="https://stackoverflow.com/questions/1258416/word-wrap-in-a-html-table">question</a> bastante popular aquí en este sitio. El problema proviene de que se usa dentro de una mesa. La solución sugerida para establecer el diseño de tabla es fijo y le da al elemento de tabla un ancho específico: <a href="http://jsfiddle.net/joplomacedo/DQmJB/3/" rel="nofollow noreferrer">http://jsfiddle.net/joplomacedo/DQmJB/3/</a></p> <p>Si está de acuerdo con agregar un ancho a su tabla, esta podría ser una buena forma de hacerlo .</p> </div> <div class="post-info"> <div class="post-meta row"> <p class="text-secondary col-lg-6"> <span class="source"> <a rel="noopener" target="_blank" href="https://stackoverflow.com/q/12574684">Fuente</a> </span> </p> <p class="text-secondary col-lg-6"> <span class="float-right date"> <span>2012-09-25 00:19:04</span> <a rel="noopener" target="_blank" href="https://stackoverflow.com/users/1171873/">banzomaikaka</a></span> </p> <p class="col-12"></p> <p class="col-12"></p></div> </div>  <div class="comments"> <div itemprop="comment" class="post-comment"> <div class="row"> <div class="col-lg-1"><span class="text-secondary">+0</span></div> <div class="col-lg-11"> <p class="commenttext">Creo que la pregunta es ligeramente diferente a esta, pero no obstante es útil yuxtaponerla con esta . ¡Gracias! – <span class="text-secondary"> <small> <span></span> </small> </span> </p> </div> </div> </div> </div> </div> </article> <article class="board-top-1 padding-top-10"> <div class="post-col vote-info"> <span class="count">4<i class="fa fa-thumbs-up"></i></span> </div> <div class="post-offset"> <div class="answer fmt"> <p>aquí hay una versión rápida de jQuery sobre cómo hacerlo.</p> <pre><code class="prettyprint-override">$('.table-striped td').html($('.table-striped td').html().replace(/,/g , ',')); </code></pre> </div> <div class="post-info"> <div class="post-meta row"> <p class="text-secondary col-lg-6"> <span class="source"> <a rel="noopener" target="_blank" href="https://stackoverflow.com/q/14702793">Fuente</a> </span> </p> <p class="text-secondary col-lg-6"> <span class="float-right date"> <span>2013-02-05 08:11:01</span> </p> <p class="col-12"></p> <p class="col-12"></p></div> </div>  <div class="comments"> <div itemprop="comment" class="post-comment"> <div class="row"> <div class="col-lg-1"><span class="text-secondary">+0</span></div> <div class="col-lg-11"> <p class="commenttext">Si alguien está intentando esto en un <textarea>, no funciona ... pero un espacio real sí lo hace. – <span class="text-secondary"> <small> <a rel="noopener" target="_blank" href="https://stackoverflow.com/users/329367/">Darren</a></span> <span></span> </small> </span> </p> </div> </div> </div> </div> </div> </article> </div> <div class="clearfix"> </div> <div class="relative-box"> <div class="relative">Cuestiones relacionadas</div> <ul class="relative_list"> <li> 1. <a href="http://es.uwenku.com/question/p-mnkacoxr-v.html" target="_blank" title="¿Por qué no se imprime el trabajo en una lambda?"> ¿Por qué no se imprime el trabajo en una lambda? </a> </li> <li> 2. <a href="http://es.uwenku.com/question/p-gkjglruj-bp.html" target="_blank" title="¿Cómo transformar una matriz en una cadena de palabras separadas por comas?"> ¿Cómo transformar una matriz en una cadena de palabras separadas por comas? </a> </li> <li> 3. <a href="http://es.uwenku.com/question/p-fpiwofuo-bg.html" target="_blank" title="¿Por qué se rompe mi System.nanoTime()?"> ¿Por qué se rompe mi System.nanoTime()? </a> </li> <li> 4. <a href="http://es.uwenku.com/question/p-ehftxxig-g.html" target="_blank" title="Convert.ToInt32() una cadena con Comas"> Convert.ToInt32() una cadena con Comas </a> </li> <li> 5. <a href="http://es.uwenku.com/question/p-thrchcap-u.html" target="_blank" title="PHP: dividir una cadena larga sin palabras rompiendo"> PHP: dividir una cadena larga sin palabras rompiendo </a> </li> <li> 6. <a href="http://es.uwenku.com/question/p-mrbwosle-n.html" target="_blank" title="El compilador no se queja cuando terminé una línea con dos puntos y comas. ¿Por qué?"> El compilador no se queja cuando terminé una línea con dos puntos y comas. ¿Por qué? </a> </li> <li> 7. <a href="http://es.uwenku.com/question/p-hafmntcz-u.html" target="_blank" title="PowerShell: ¿Por qué Out-File rompe la línea larga en líneas más pequeñas?"> PowerShell: ¿Por qué Out-File rompe la línea larga en líneas más pequeñas? </a> </li> <li> 8. <a href="http://es.uwenku.com/question/p-uwrpqfjy-c.html" target="_blank" title="¿Cómo dividir una cadena separada por comas?"> ¿Cómo dividir una cadena separada por comas? </a> </li> <li> 9. <a href="http://es.uwenku.com/question/p-ekptlovt-bm.html" target="_blank" title="¿Por qué C# se rompe si no es opcional?"> ¿Por qué C# se rompe si no es opcional? </a> </li> <li> 10. <a href="http://es.uwenku.com/question/p-dxdzjdyr-bd.html" target="_blank" title="¿Por qué se rompe el tipo Complex de .NET?"> ¿Por qué se rompe el tipo Complex de .NET? </a> </li> <div> <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> <ins class="adsbygoogle" style="display:block; text-align:center;" data-ad-layout="in-article" data-ad-format="fluid" data-ad-client="ca-pub-6208739752673518" data-ad-slot="4606349252"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div> <li> 11. <a href="http://es.uwenku.com/question/p-mophdqyd-bb.html" target="_blank" title="Crear una cadena delimitada por comas"> Crear una cadena delimitada por comas </a> </li> <li> 12. <a href="http://es.uwenku.com/question/p-snorutnc-z.html" target="_blank" title="¿Por qué no se rompe Visual Studio 2010 en una excepción no controlada?"> ¿Por qué no se rompe Visual Studio 2010 en una excepción no controlada? </a> </li> <li> 13. <a href="http://es.uwenku.com/question/p-bjtenlze-a.html" target="_blank" title="regexp dividir cadena por comas y espacios, pero ignorar palabras con guiones?"> regexp dividir cadena por comas y espacios, pero ignorar palabras con guiones? </a> </li> <li> 14. <a href="http://es.uwenku.com/question/p-sleeinnq-bt.html" target="_blank" title="Búsqueda de MySQL valores en una cadena separada por comas"> Búsqueda de MySQL valores en una cadena separada por comas </a> </li> <li> 15. <a href="http://es.uwenku.com/question/p-bwkfxywg-bq.html" target="_blank" title="Cómo filtrar de manera eficiente una cadena contra una larga lista de palabras en Python/Django?"> Cómo filtrar de manera eficiente una cadena contra una larga lista de palabras en Python/Django? </a> </li> <li> 16. <a href="http://es.uwenku.com/question/p-kjanvdcf-v.html" target="_blank" title="¿Cómo harías una cadena separada por comas de una lista?"> ¿Cómo harías una cadena separada por comas de una lista? </a> </li> <li> 17. <a href="http://es.uwenku.com/question/p-kbypiyti-br.html" target="_blank" title="¿Cómo convierto una cadena separada por comas en una matriz?"> ¿Cómo convierto una cadena separada por comas en una matriz? </a> </li> <li> 18. <a href="http://es.uwenku.com/question/p-fofvqnqg-bw.html" target="_blank" title="String array como una cadena separada por comas en XAML"> String array como una cadena separada por comas en XAML </a> </li> <li> 19. <a href="http://es.uwenku.com/question/p-sgrvvpwp-t.html" target="_blank" title="¿Cómo creo una cadena delimitada por comas de una ArrayList?"> ¿Cómo creo una cadena delimitada por comas de una ArrayList? </a> </li> <li> 20. <a href="http://es.uwenku.com/question/p-vgmusceb-bh.html" target="_blank" title="Sitemap se rompe aleatoriamente con el tiempo"> Sitemap se rompe aleatoriamente con el tiempo </a> </li> <li> 21. <a href="http://es.uwenku.com/question/p-kjfifitx-bu.html" target="_blank" title="Definición de una cadena larga en Razor"> Definición de una cadena larga en Razor </a> </li> <li> 22. <a href="http://es.uwenku.com/question/p-tnsgblwl-s.html" target="_blank" title="¿Por qué el enlace de datos se rompe en el modo OneWay?"> ¿Por qué el enlace de datos se rompe en el modo OneWay? </a> </li> <li> 23. <a href="http://es.uwenku.com/question/p-chwnekwl-a.html" target="_blank" title="valores de moneda dividida cadena por comas"> valores de moneda dividida cadena por comas </a> </li> <li> 24. <a href="http://es.uwenku.com/question/p-beojpect-x.html" target="_blank" title="¿Por qué no __tribuye __ ((constructor)) trabajo en una biblioteca estática?"> ¿Por qué no __tribuye __ ((constructor)) trabajo en una biblioteca estática? </a> </li> <li> 25. <a href="http://es.uwenku.com/question/p-njzxklsm-r.html" target="_blank" title="¿Cómo dividir una cadena por comas posicionadas fuera de paréntesis?"> ¿Cómo dividir una cadena por comas posicionadas fuera de paréntesis? </a> </li> <li> 26. <a href="http://es.uwenku.com/question/p-ntrxykhy-bm.html" target="_blank" title="Romper una cadena aparte en una secuencia de palabras"> Romper una cadena aparte en una secuencia de palabras </a> </li> <li> 27. <a href="http://es.uwenku.com/question/p-usqtbdbg-bp.html" target="_blank" title="¿Por qué no se imprime mi cadena?"> ¿Por qué no se imprime mi cadena? </a> </li> <li> 28. <a href="http://es.uwenku.com/question/p-crlgzqor-bg.html" target="_blank" title="Por qué "display: table-cell" se rompe cuando "position: absolute""> Por qué "display: table-cell" se rompe cuando "position: absolute" </a> </li> <li> 29. <a href="http://es.uwenku.com/question/p-sgboqumd-u.html" target="_blank" title="Invertir palabras en una cadena"> Invertir palabras en una cadena </a> </li> <li> 30. <a href="http://es.uwenku.com/question/p-bzhhcdwu-d.html" target="_blank" title="Firebug no se rompe en los errores"> Firebug no se rompe en los errores </a> </li> </ul> </div> <div> <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> <ins class="adsbygoogle" style="display:block" data-ad-format="autorelaxed" data-ad-client="ca-pub-6208739752673518" data-ad-slot="1575177025"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div> <div class="padding-top-10"></div> </div> </div> <script type="text/javascript" src="http://img.uwenku.com/uwenku/script/side.js?t=1644592048471"></script> <script type="text/javascript" src="http://img.uwenku.com/uwenku/plugin/highlight/highlight.pack.js"></script> <link href="http://img.uwenku.com/uwenku/plugin/highlight/styles/docco.css" media="screen" rel="stylesheet" type="text/css" /> <script type="text/javascript"> $('pre').each(function(i, e) { hljs.highlightBlock(e, "<span class='indent'> </span>", false) }); </script> <div class="col-lg-3 col-md-4 col-sm-5"> <div id="rightTop"> <div class="row"> <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-6208739752673518" data-ad-slot="5415218910" data-ad-format="auto" data-full-width-responsive="true"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div> <div class="row sidebar panel panel-default"> <div class="panel-heading font-bold"> Última pregunta </div> <div class="m-b-sm m-t-sm clearfix"> <ul class="side_article_list"> <li class="side_article_list_item"> 1. <a href="http://es.uwenku.com/question/p-htmowfon-r.html" target="_blank" title="Cómo iterar std :: set?"> Cómo iterar std :: set? </a> </li> <li class="side_article_list_item"> 2. <a href="http://es.uwenku.com/question/p-ufqzfcch-o.html" target="_blank" title="Intentando imprimir cada submódulo dentro de un módulo en python"> Intentando imprimir cada submódulo dentro de un módulo en python </a> </li> <li class="side_article_list_item"> 3. <a href="http://es.uwenku.com/question/p-hhiyqixx-bn.html" target="_blank" title="¿Cómo puedo leer una línea de entrada en Inform 7?"> ¿Cómo puedo leer una línea de entrada en Inform 7? </a> </li> <li class="side_article_list_item"> 4. <a href="http://es.uwenku.com/question/p-pmyxcofi-bp.html" target="_blank" title="Insertar varias filas de valores por defecto en una tabla"> Insertar varias filas de valores por defecto en una tabla </a> </li> <li class="side_article_list_item"> 5. <a href="http://es.uwenku.com/question/p-pyxyfdax-bq.html" target="_blank" title="Comportamiento de ancho de borde extraño en Chrome: ancho de borde de punto flotante?"> Comportamiento de ancho de borde extraño en Chrome: ancho de borde de punto flotante? </a> </li> <li class="side_article_list_item"> 6. <a href="http://es.uwenku.com/question/p-qkfnitds-br.html" target="_blank" title="Obtener VS JavaScript IntelliSense para js en un archivo diferente"> Obtener VS JavaScript IntelliSense para js en un archivo diferente </a> </li> <li class="side_article_list_item"> 7. <a href="http://es.uwenku.com/question/p-hcurhqyx-bt.html" target="_blank" title="Array.sort y Node.js"> Array.sort y Node.js </a> </li> <li class="side_article_list_item"> 8. <a href="http://es.uwenku.com/question/p-rbggdspv-ba.html" target="_blank" title="Varias tablas (5) una página usando ReportLab"> Varias tablas (5) una página usando ReportLab </a> </li> <li class="side_article_list_item"> 9. <a href="http://es.uwenku.com/question/p-enqhopcm-ba.html" target="_blank" title="¿Cuál es la forma correcta de ocultar elementos HTML en la carga de la página antes de que se muestren?"> ¿Cuál es la forma correcta de ocultar elementos HTML en la carga de la página antes de que se muestren? </a> </li> <li class="side_article_list_item"> 10. <a href="http://es.uwenku.com/question/p-gashagay-u.html" target="_blank" title="Añadir texto simple a Panel de control"> Añadir texto simple a Panel de control </a> </li> </ul> </div> </div> </div> <p class="article-nav-bar"></p> <div class="row sidebar article-nav"> <div class="row box_white visible-sm visible-md visible-lg margin-zero"> <div class="top"> <h3 class="title"><i class="glyphicon glyphicon-th-list"></i> Cuestiones relacionadas</h3> </div> <div class="article-relative-content"> <ul class="side_article_list"> <li class="side_article_list_item"> 1. <a href="http://es.uwenku.com/question/p-mnkacoxr-v.html" target="_blank" title="¿Por qué no se imprime el trabajo en una lambda?"> ¿Por qué no se imprime el trabajo en una lambda? </a> </li> <li class="side_article_list_item"> 2. <a href="http://es.uwenku.com/question/p-gkjglruj-bp.html" target="_blank" title="¿Cómo transformar una matriz en una cadena de palabras separadas por comas?"> ¿Cómo transformar una matriz en una cadena de palabras separadas por comas? </a> </li> <li class="side_article_list_item"> 3. <a href="http://es.uwenku.com/question/p-fpiwofuo-bg.html" target="_blank" title="¿Por qué se rompe mi System.nanoTime()?"> ¿Por qué se rompe mi System.nanoTime()? </a> </li> <li class="side_article_list_item"> 4. <a href="http://es.uwenku.com/question/p-ehftxxig-g.html" target="_blank" title="Convert.ToInt32() una cadena con Comas"> Convert.ToInt32() una cadena con Comas </a> </li> <li class="side_article_list_item"> 5. <a href="http://es.uwenku.com/question/p-thrchcap-u.html" target="_blank" title="PHP: dividir una cadena larga sin palabras rompiendo"> PHP: dividir una cadena larga sin palabras rompiendo </a> </li> <li class="side_article_list_item"> 6. <a href="http://es.uwenku.com/question/p-mrbwosle-n.html" target="_blank" title="El compilador no se queja cuando terminé una línea con dos puntos y comas. ¿Por qué?"> El compilador no se queja cuando terminé una línea con dos puntos y comas. ¿Por qué? </a> </li> <li class="side_article_list_item"> 7. <a href="http://es.uwenku.com/question/p-hafmntcz-u.html" target="_blank" title="PowerShell: ¿Por qué Out-File rompe la línea larga en líneas más pequeñas?"> PowerShell: ¿Por qué Out-File rompe la línea larga en líneas más pequeñas? </a> </li> <li class="side_article_list_item"> 8. <a href="http://es.uwenku.com/question/p-uwrpqfjy-c.html" target="_blank" title="¿Cómo dividir una cadena separada por comas?"> ¿Cómo dividir una cadena separada por comas? </a> </li> <li class="side_article_list_item"> 9. <a href="http://es.uwenku.com/question/p-ekptlovt-bm.html" target="_blank" title="¿Por qué C# se rompe si no es opcional?"> ¿Por qué C# se rompe si no es opcional? </a> </li> <li class="side_article_list_item"> 10. <a href="http://es.uwenku.com/question/p-dxdzjdyr-bd.html" target="_blank" title="¿Por qué se rompe el tipo Complex de .NET?"> ¿Por qué se rompe el tipo Complex de .NET? </a> </li> </ul> </div> </div> </div> </div> </div> </div> </div>  <footer id="footer"> <div class="bg-simple lt"> <div class="container"> <div class="row padder-v m-t"> <div class="col-xs-8"> <ul class="list-inline"> <li><a href="http://es.uwenku.com/contact">Contactanos</a></li> <li>© 2020 ES.UWENKU.COM</li> <li><a target="_blank" href="https://beian.miit.gov.cn/">沪ICP备13005482号-4</a></li> <li><script type="text/javascript" src="https://v1.cnzz.com/z_stat.php?id=1280101193&web_id=1280101193"></script></li> <li><a href="http://www.uwenku.com/" target="_blank" title="优文库">简体中文</a></li> <li><a href="http://hk.uwenku.com/" target="_blank" title="優文庫">繁體中文</a></li> <li><a href="http://ru.uwenku.com/" target="_blank" title="поле вопросов и ответов">Русский</a></li> <li><a href="http://de.uwenku.com/" target="_blank" title="Frage - und - antwort - Park">Deutsch</a></li> <li><a href="http://es.uwenku.com/" target="_blank" title="Preguntas y respuestas">Español</a></li> <li><a href="http://hi.uwenku.com/" target="_blank" title="कार्यक्रम प्रश्न और उत्तर पार्क">हिन्दी</a></li> <li><a href="http://it.uwenku.com/" target="_blank" title="IL Programma di chiedere Park">Italiano</a></li> <li><a href="http://ja.uwenku.com/" target="_blank" title="プログラム問答園区">日本語</a></li> <li><a href="http://ko.uwenku.com/" target="_blank" title="프로그램 문답 단지">한국어</a></li> <li><a href="http://pl.uwenku.com/" target="_blank" title="program o park">Polski</a></li> <li><a href="http://tr.uwenku.com/" target="_blank" title="Program soru ve cevap parkı">Türkçe</a></li> <li><a href="http://vi.uwenku.com/" target="_blank" title="Đáp ứng viên">Tiếng Việt</a></li> <li><a href="http://fr.uwenku.com/" target="_blank" title="Programme interrogation Park">Française</a></li> </ul> </div> </div> </div> </div> </div> </footer>  <script> var _hmt = _hmt || []; (function() { var hm = document.createElement("script"); hm.src = "https://hm.baidu.com/hm.js?f78a970f17b19a79fc477a3378096f29"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(hm, s); })(); </script> </body> </html>

¿Por qué no se rompe el trabajo de palabras en una cadena larga con comas?

Respuesta