我有一个包含一个很长的单词的内联块元素.当我调整视口大小,直到我到达下一行文本的断点,我获得了大量的空间.但是,我希望内联块元素立即包含在其内容的宽度上.
我发现很难准确地解释发生了什么,所以下面一个动画GIF来说明我的问题：
调整视口大小后：
要清楚,上图是我不断调整视口大小.
有没有人知道实现我想要的方式？即使使用CSS连字符,空格仍然保留(我不想要的).
调整框架大小,看看我的意思.
div {
display: inline-block;
background-color: black;
color: white;
padding: 5px;
}
解决方法
内嵌块确实扩展了您的动画显示的大小调整,以便它能够让长时间的地方再次进入该空间.
一个简单的解决方案是添加text-align：对齐,但我恐怕可能不完全是你想要的(见demo).
另一个将是@Parody建议的媒体查询的使用,但是你必须知道包含div的大小,并且这不是你提到的非常可扩展的.
断字：@yugi建议的break-all也有效,但是会导致单词按字母逐个折叠,而不管它们的长度.
实现确切行为的唯一方法是(据我所知)使用javascript.例如,您必须将文本包装到div中的span元素中,然后添加如下内容：
var paddingLeft = parseInt($('#foo').css('padding-left')),paddingRight = parseInt($('#foo').css('padding-left')),paddingTop = parseInt($('#foo').css('padding-top')),paddingBottom = parseInt($('#foo').css('padding-Bottom')),cloned = $('#foo span').clone(),cloned_wrap = document.createElement('div');
$(cloned_wrap).css({
paddingLeft : paddingLeft,paddingRight : paddingRight,display : 'inline-block',visibility: 'hidden',float: 'left',});
$(cloned_wrap).insertAfter('#foo');
cloned.appendTo(cloned_wrap);
$(window).on('resize',function(){
$('#foo').css('width',cloned.width() + 1);
$(cloned_wrap).css('margin-top',- $('#foo').height() - paddingTop - paddingBottom);
}).resize();
请看jsfiddle working demo.(←多次编辑)
这是相当多的代码,但它的作品; )
(PS：我假设jquery是可用的,如果没有,完全相同的可以在纯JS中实现)
