web-dev-qa-db-ja.com

リンクは親のdiv幅をオーバーフローしないようにWordでラップします

私はこのコードを持っています：

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>

リンクテキストは非常に長くなる場合があり、その長さがdivの幅を超えるとdivからオーバーフローします。リンクの幅がdivの幅を超えたときに、強制的にリンクを解除して次の行に進む方法はありますか？

htmlcsswidthword-wrap
47
Florent2

以下は、ブラウザ間の互換性のあるソリューションです。

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

<td>内に空白なしでテキストをラップする方法

動作例を確認してください here 。

106
Hussein

CSS3に問題がない場合、そのためのプロパティがあります。

Word-wrap:break-Word;
9
corroded

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

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

または

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

または、javascriptを使用してリンクのテキストの長さを切り捨て、末尾を「...」に置き換えます

JSメソッドの実例： http://jsfiddle.net/fhCYX/3/

0
TimFoolery

より小さな幅で別の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>
0
user554180

overflow:hiddenは、size:autobreak-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/

この例には、レイアウトのようなメディアオブジェクトを実現しようとしていた左フロートが含まれています。

残念ながら、table-cell要素を使用しようとすると、再び壊れます:(

0
The Trav

私は受け入れられた答えの解決策にあまり運がなかったので、別のアプローチを試みました。ロード時に、アンカーテキストのすべてのスラッシュにスペースを埋め込みます： "/"-> "/"。ほとんどのリンクにはスラッシュがないため、これは何も行いません。また、それらを含むほとんどのリンクはハイパーリンクであり、この置換で問題なく見えるようになり、リンクは正しく折り返されます。

    $('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