如何强制宽度自动表上的文字换行？

阅读一些以前的帖子我来了解一下，在表格中包装文字我们需要添加table-layout: fixed和word-wrap: break-word。但是，这是行不通的，如果没有任何固定宽度表如何强制宽度自动表上的文字换行？

.container { 
 

 
    width: 30%; 
 
    padding: 5px; 
 
    background: #888; 
 
    border: 1px dotted red; 
 
    } 
 

 
.table { 
 
    display: table; 
 
    table-layout: fixed; 
 
    width: auto; 
 
    word-wrap: break-word; 
 
    }

<div class="container"> 
 
    <div class="table"> 
 
    <a href="#">unbreajabelunbreajabelunbreajabelunbreajabelunbreajabelunbreajabelunbreajabelunbreajabelunbreajabelunbreajabelunbreajabelunbreajabelunbreajabelunbreajabelunbreajabelunbreajabelunbreajabelunbreajabelunbreajabelunbreajabel</a> 
 
</div> 
 
    
 
    </div>

在我的网站我有几分的情况，我无法给元素固定宽度与显示表。

如何实现换行以避免文本溢出？

来源

2017-01-16 user31782

@Pete在实际网站中，它的引导列宽度以百分比表示宽度。我在这里添加了固定宽度以避免不必要的标记。我现在已经把它变成了问题本身的百分比。 – user31782

尝试给予.table元素宽度和锚点元素单词换行：断字;

.container { 
 
    width: 500px; 
 
    padding: 5px; 
 
    background: #888; 
 
    border: 1px dotted red; 
 
} 
 
.table { 
 
    display: table; 
 
    table-layout: fixed; 
 
    width: 100% 
 
} 
 
a { 
 
    word-wrap: break-word; 
 
}

<div class="container"> 
 
    <div class="table"> 
 
    <a href="#">unbreajabelunbreajabelunbreajabelunbreajabelunbreajabelunbreajabelunbreajabelunbreajabelunbreajabelunbreajabelunbreajabelunbreajabelunbreajabelunbreajabelunbreajabelunbreajabelunbreajabelunbreajabelunbreajabelunbreajabel</a> 
 
    </div> 
 

 
</div>

来源

2017-01-16 16:54:26 Deep

对不起，但这在Firefox中不起作用。 – user31782

@ user31782请检查，它也应该在Firefox上运行。 – Deep

您可以使用CSS属性word-break做到这一点。

word-break: break-all将所有单元格内容分成多行以适应宽度。

.table { 
    display: table; 
    table-layout: fixed; 
    width: auto; 
    word-break: break-all; 
}

检查http://www.w3schools.com/cssref/css3_pr_word-break.asp其他值的属性。也与Firefox其他答案兼容使用错误的值。

来源

2017-01-16 16:55:35 Callum

如何强制宽度自动表上的文字换行？

回答

相关问题