web-dev-qa-db-fra.com

Word encapsule un lien afin qu'il ne déborde pas de sa largeur de div parent

J'ai ce morceau de code:

div#permalink_section {
  width: 960px
}
<div id='permalink_section'>
  <a href="here goes a very long link">here goes a very very long link</a>
</div>

Le texte du lien peut être très long et il déborde le div lorsque sa longueur dépasse la largeur du div. Existe-t-il un moyen de forcer le lien à se rompre et à passer à la ligne suivante lorsque sa largeur dépasse la largeur div?

htmlcsswidthword-wrap
47
Florent2

Voici une solution compatible avec plusieurs navigateurs:

#permalink_section
{
    white-space: pre-wrap; /* CSS3 */    
    white-space: -moz-pre-wrap; /* Mozilla, since 1999 */
    white-space: -pre-wrap; /* Opera 4-6 */    
    white-space: -o-pre-wrap; /* Opera 7 */    
    Word-wrap: break-Word; /* Internet Explorer 5.5+ */
}

De Comment puis-je encapsuler du texte sans espace dans un <td>?

Vérifiez l'exemple de travail ici .

106
Hussein

Si vous êtes d'accord avec CSS3, il y a une propriété pour ça:

Word-wrap:break-Word;
9
corroded

Fonctionne pour Internet Explorer 8+, Firefox 6+, iOS 4.2, Safari 5.1+ et Chrome 13+.

[~ # ~] css [~ # ~] 

.Word-wrap {
    /* Warning: Needed for oldIE support, but words are broken up letter-by-letter */
    -ms-Word-break: break-all;
    Word-break: break-all;
    /* Non standard for webkit */
    Word-break: break-Word;

    -webkit-hyphens: auto;
    -moz-hyphens: auto;
    -ms-hyphens: auto;
    hyphens: auto;
}

Source: kenneth.io

[~ # ~] scss [~ # ~] 

@mixin Word-wrap() {
    Word-break:     break-Word;
    -webkit-hyphens: auto;
    -moz-hyphens:    auto;
    hyphens:         auto;
}

Source: css-tricks.com

2
laffuste
div#permalink_section
{   
    width:960px;
    overflow:hidden;
}

ou

div#permalink_section
{   
    width:960px;
    Word-wrap:break-Word
}

ou utilisez javascript pour tronquer la longueur du texte du lien, en remplaçant la fin par "..."

Exemple de travail de la méthode JS: http://jsfiddle.net/fhCYX/3/

0
TimFoolery

enrouler le lien à l'intérieur d'un autre div avec une largeur plus petite

<html>
<head><title></title>

<style type="text/css">
div#permalink_section { width: 960px }

</style>
</head>
<body>
<div id='permalink_section'>
<div id="linkwrap" style="width:100px">
  <a href="here goes a very long link">here goes a very very long link</a>
  </div>
</div>
</body>
</html>
0
user554180

overflow:hidden semble être la clé pour créer un élément de size:autobreak-Word correctement

<ul class="list">
<li class="item">
    <div class="header">
      <div class="content"></div>
    </div>
    <div class="body ">
<p>Loremipsumdolorsitametconsecteturadipisicingelitseddoeiusmodtemporincididuntutlaboreetdoloremagnaaliqua.</p>
    </div>
</li>

</ul>
​

.list {
    border: 1px solid black;
    margin: 50px;
}

.header {
    float:left;
}

.body {
    overflow: hidden;
}

.body p {
    Word-wrap: break-Word;
}

.header .content {
    background: #DDD;
    width: 80px;
    height: 30px;
}

La

http://jsfiddle.net/9jDxR/

Cet exemple inclut un flotteur gauche alors que j'essayais de réaliser une disposition semblable à un objet multimédia.

Malheureusement, si vous essayez d'utiliser table-cell éléments qu'il casse à nouveau :(

0
The Trav

Je n'ai pas eu beaucoup de chance avec la solution dans la réponse acceptée, j'ai donc essayé une approche différente. Lors du chargement, je remplis toutes les barres obliques du texte d'ancrage avec des espaces: "/" -> "/". La plupart des liens n'ont pas de barres obliques et donc cela ne fait rien, et la plupart des liens qui en ont sont des hyperliens, et ceux-ci semblent corrects avec cette substitution, puis les liens se terminent correctement.

    $('a').each(function ()
    {
        //get the content
        var content = $(this).html();

        //a regex to find all slashes
        var rgx = new RegExp('/', 'g');

        //do the replacement
        content = content.replace(rgx, " / ")

        //the previous step also affects http:// (where present), so fix this back up
        content = content.replace('http: /  / ', 'http://');

        //set the content back into the element
        $(this).html(content);
    });
0
Joshua Frank