CSS自動換行按預期方式工作不正常

爲什麼在下面的示例中無法正確使用自動換行屬性？CSS自動換行按預期方式工作不正常

我能做些什麼，以確保在第一線本身「consectetur」符合這個詞的一部分？我希望每行最多可容納數量的字符。

的CSS是：

#fos { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; 
    font-size:14px; 
    font-weight: normal; 
    line-height: 18px; 
    width: 238px; 
    height:38px; 
    cursor: pointer; 
    word-wrap:break-word; 
    border:2px solid; }

來源

2012-12-11 user930514

這幫助：http://stackoverflow.com/questions/10743763/word-wrap-break-word-does-not-work-in-this-example –

使用word-break: break-all;

#fos { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; 
    font-size:14px; 
    font-weight: normal; 
    line-height: 18px; 
    width: 238px; 
    height:38px; 
    cursor: pointer; 
word-break: break-all; 
    border:2px solid; }

LIVE DEMO

來源

2012-12-11 11:33:01 Sowmya

BTW：根據這個：http：// caniuse .com /＃feat = word-break'wo rd-break「在Opera中不起作用：/ – czachor

是的，它不適用於歌劇 – Sowmya

在任意點打破單詞，甚至沒有在行尾添加連字符，都不符合豬拉丁語的規則，更不用說拉丁文或英文了。 –

它不能正常換行，因爲瀏覽器不應用自動斷字（這將導致道路正確包裝）默認情況下。您需要使用CSS連字符或基於JavaScipt的連字符。設置word-wrap:break-word以及word-break: break-all，根據定義打破單詞（將其拆分爲仲裁數據塊），而不是正確的包裝。

來源

2013-01-07 08:54:55

由於css word-wrap在所有瀏覽器中都不起作用，請改用JavaScript！它應該給出相同的結果。

下面的函數需要JQuery，它會在每次重新調整窗口大小時運行。

該函數檢查元素是否具有更多的寬度，然後是它的父級，如果它具有，它會打破所有而不是單詞。我們不希望孩子比父母長大，對吧？

我只需要它用於表格，所以如果你想在其他元素中使用，只需將「table」改爲「#yourId」或「.yourClass」即可。確保有一個父母div或更改「div」到「身體」或什麼？

如果它會去別的，它改變字斷，然後檢查是否應該改回來，這就是爲什麼有這麼多的代碼..：'/

$(window).on('resize',function() { 
    $('table').each(function(){ 
     if($(this).width() > $(this).parent('div').width()){ 
      $(this).css('word-break', 'break-all'); 
     } 
     else{ 
      $(this).css('word-break', 'break-word'); 
      if($(this).width() > $(this).parent('div').width()){ 
       $(this).css('word-break', 'break-all'); 
      } 
     } 
    }); 
}).trigger('resize');

我希望它適用於您！

來源

2014-10-31 13:09:46 SebHallin

如果word-wrap: break-all不工作，嘗試也補充一點：與.btn類引導3

來源

2015-03-02 12:36:01

不知道爲什麼這個工程，但這節省了我一堆時間，謝謝！ – diplosaurus

保存我的一天... –

保存我的一天！乾杯! – Daft

這是一個自動換行文本很有

white-space:normal;

工作對我來說：

#fos { 
    white-space: nowrap; 
    overflow: hidden; 
    text-overflow: ellipsis; 
    width: 100%; 
}

來源

2016-06-20 14:57:52 Manolo

CSS自動換行按預期方式工作不正常

回答

相關問題