HTML和CSS智能自動換行符？

我努力使我的網站在桌面和移動設備上都能正確顯示。我現在面臨的問題是文本從容器中流出（並且移出瀏覽器邊界）。該文本由一些網站地址組成。HTML和CSS智能自動換行符？

我知道字突破：突破 - 所有 CSS屬性，但我改變它的價值，我的默認瀏覽器，海豚瀏覽器（Android設備）already did this in a smarter way

我明白，這種行爲是之前發現可能與瀏覽器本身有關。我在想，如果有一種方式來實現所有的瀏覽器，而不是使用CSS字斷特性相同的結果，這將導致something like this

編輯：

一個框HTML代碼：

  <div class="col-30 col-m-30"> 
       <div class="shadow-box wow fadeInRight"> 
        <p><img src="/_common/_images/_soundcloudicon/dark_128.png"/></p> 
        <h3>SoundCloud</h3> 
        <div style="height: 4px; width: 128px; background-color: rgb(15, 15, 30); margin: 4px auto;"></div> 
        <a href="https://www.soundcloud.com/thelastminutemusic"><p>www.soundcloud.com/thelastminutemusic</p></a> 
       </div> 
      </div>

並且這是所使用的CSS類（哇和fadeInRight是從動畫CSS文件和col-30設置div的寬度至50％）：

.shadow-box 
{ 
    border-radius: 4px; 

    margin: 32px; 
    padding: 16px; 
    box-shadow: 1px 1px 8px rgba(15, 15, 30, 0.5); 
}

來源

2016-02-17 Sneppy

請在這裏放一些代碼！ – Pedram

@jiff更新了帖子。 – Sneppy

如果我正確理解您的問題，您是否嘗試爲所有網址實現以下格式：www.domain.com/（linebreakhere)restoftheurl /？ –

您可以使用<wbr>標籤打破特定位置的鏈接。

當一個單詞太長，或者你是怕瀏覽器將打破你的線條在錯誤的地方，你可以使用要添加的元素字破發機會。

你應該在你希望你的文字將打破地方添加：

<a href="https://www.soundcloud.com/thelastminutemusic"><p>www.soundcloud.com/<wbr>thelastminutemusic</p></a>

來源

2016-02-17 12:21:09 dimshik

瀏覽器支持''：http://caniuse.com/#feat=wbr-element – Marcelo

謝謝你，它像一個魅力工作！我認爲這是這種情況下最好的解決方案 – Sneppy

你想要的是這個片段的CSS：

.dont-break-out { 

    /* These are technically the same, but use both */ 
    overflow-wrap: break-word; 
    word-wrap: break-word; 

    -ms-word-break: break-all; 
    /* This is the dangerous one in WebKit, as it breaks things wherever */ 
    word-break: break-all; 
    /* Instead use this non-standard one: */ 
    word-break: break-word; 

    /* Adds a hyphen where the word breaks, if supported (No Blink) */ 
    -ms-hyphens: auto; 
    -moz-hyphens: auto; 
    -webkit-hyphens: auto; 
    hyphens: auto; 

}

從CSS-技巧無恥複製： Handling Long Words and URLs (Forcing Breaks, Hyphenation, Ellipsis, etc)

來源

2016-02-17 12:29:49 jacmoe

HTML和CSS智能自動換行符？

回答

相關問題