调整大小 – 嵌入式行包装多余的空间

我有一个包含一个很长的单词的内联块元素.当我调整视口大小,直到我到达下一行文本的断点,我获得了大量的空间.但是,我希望内联块元素立即包含在其内容的宽度上.

我发现很难准确地解释发生了什么,所以下面一个动画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中实现)

原文地址：https://www.jb51.cc/css/216899.html