CSS：渲染宽度并不完全是单词换行

由于width：'auto'，父div的宽度取决于其子级。但是它在文字包装的同时在右侧留下了一些可见的空间。我怎样才能得到像this的确切内容宽度？CSS：渲染宽度并不完全是单词换行

<div class="parent"> 
    <div> 
    Central Central CentralCentral 
    </div> 
</div> 


.parent{ 
    border:1px solid red; 
    white-space:normal; 
    word-wrap:break-word; 
    width:auto; 
    max-width:155px; 
}

https://jsfiddle.net/remila_antony/LdLuqhtz/

来源

2016-11-25 Remila Antony

但这种方式要设置为“155px”隐含 –

嗨@MrLister我不能使用
的内容可能会有所不同:( –

_“宽度为宽度：‘汽车’，父div的宽度取决于在它的子元素上__ - 不，它不是 - div是一个块元素，所以width：auto意味着完全可用的宽度，只有你的最大宽度限制div的宽度。 – CBroe

AFAIK没有CSS只达到你想要什么样的方式。
如果有的话，也许有一些巧妙的使用弹性盒，我不完全是一个古茹，但我很高兴听到它！

同时，这里有一个小小的JavaScript小工具，可以满足您的需求。它会减小宽度直到高度增长（由更多的单词引起），然后增加宽度。

var p = document.getElementsByClassName('parent')[0]; 
 
var w = p.clientWidth, h = p.clientHeight; 
 
do p.style.width = (w -= 10) + 'px'; while (w >= 10 && p.clientHeight <= h); 
 
do p.style.width = (++w) + 'px'; while (p.clientHeight > h);

.parent { 
 
    border: 1px solid red; 
 
    white-space: normal; 
 
    word-wrap: break-word; 
 
    width: auto; 
 
    max-width: 155px; 
 
}

<div class="parent"> 
 
    <div>Central Central CentralCentral</div> 
 
</div>

请记住，这是不是万无一失虽然;它工作的唯一原因是因为你允许文本打破中间词。否则，如果您从内容中删除第一个空间，它将失败。

来源

2016-11-25 13:45:28

CSS：渲染宽度并不完全是单词换行

回答

相关问题