Word переносит ссылку, чтобы она не переполняла родительскую ширину div

У меня есть этот кусок кода:

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>

Ответ 1

Ниже приведено кросс-браузерное совместимое решение:

#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+ */
}

Из Как обернуть текст без пробелов внутри тега & lt; td & gt;?

Проверьте рабочий пример здесь.

Ответ 2

Если у вас все в порядке с CSS3, для этого есть свойство:

word-wrap:break-word;

Ответ 3

Работает для Internet Explorer 8+, Firefox 6+, iOS 4.2, Safari 5. 1+ и 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;
}

Источник: kenneth.io

SCSS

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

Источник: css-tricks.com

Ответ 4

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

или

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

или используйте javascript для усечения длины текста ссылки, заменив конец на "..."

Рабочий пример метода JS: http://jsfiddle.net/fhCYX/3/

Ответ 5

обернуть ссылку внутри другого div с меньшей шириной

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

Ответ 6

Мне не повезло с решением в принятом ответе, поэтому я попробовал другой подход. При загрузке я помещаю все черты в текст привязки с пробелами: "/" → "/". Большинство ссылок не имеют косой черты, и поэтому это ничего не делает, и большинство ссылок, которые имеют их, являются гиперссылками, и они выглядят хорошо с этой подстановкой, а затем ссылки действительно обертываются правильно.

    $('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);
    });

Ответ 7

overflow:hidden кажется ключом к правильному правильному созданию элемента size:auto break-word

<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;
}

http://jsfiddle.net/9jDxR/

Этот пример включает левый float, поскольку я пытался достичь медиа-объекта, такого как макет.

К сожалению, если вы попытаетесь использовать элементы table-cell, он снова сломается: (

Ответ 8

Вы также можете обернуть каждую букву ссылки в <span></span> с помощью javascript, например.

<a href="#" onclick="location.href='http://foo.bar'; return false;"><span>f</span><span>o</span><span>o</span></a>

Но я бы пошел на подход css3.

2017 Отказ от ответственности: Это нехорошее решение, и я никогда не говорил, что это так. Если вы все еще чувствуете необходимость комментировать, пожалуйста, по крайней мере, прочитайте предыдущие комментарии