使div宽度等于其中最长的单词/句子长度 [英] Making div width equal to the longest word/sentence length inside it

问题描述

我想将 div宽度等于内容最长的单词/句子长度。以下是示例：

I want to make div width equal to content longest word/sentence length. Here is sample:

<div id="1">I_want_to_make_div_width_equal_to_this_word</div>

这个css代码可以正常工作：

It works fine with this css code:

div {display: inline-block;}

It也适用于此示例：

It also works in this example:

<div id="2"> I_want_to_make_div_width_equal_to_this_word <br/> 
             and_anther_word_in_next_line </div>

ID =2的Div的宽度是最长的单词。

Div with id="2" has a width of the longest word.

但我的问题是这个例子。当内容窗口太小而不能在一行中包含两个单词时，div的宽度为100％窗口大小：

But my problem is with this example. When content window is too small to contain both words in one line, div have width of 100% window size:

<div id="3"> I_want_to_make_div_width_equal_to_this_word
             and_anther_word_in_next_line </div>

id = 3的div是否可能表现得像id = 2但没有< br /> 签收？

Is it possible for the div with id=3 to behave like id=2 but without <br /> sign?

我刚刚描述的示例： http://jsfiddle.net/2vffqrwy/ （使第三个div中的单词分成两行的窗口宽度）。

Examples I just described: http://jsfiddle.net/2vffqrwy/ (make width of window that break words in third div into two separate lines).

编辑：
完美的解决方案是当div id = 3时，当窗口足够大并且行为像div时，在一行中显示两个单词id = 2当window为small时，在一行中包含两个单词。

The perfect solution is when div id=3 display both words in one line when window is big enough and behaves like div id=2 when window is to small to contain both words in one line.

推荐答案

来自OP评论的新编辑：

New Edit from OP's comments :

我能看到解决这个问题的唯一方法是使用javascript，

我制作了一个uggly且可能过度使用的代码片段来完成这项工作：

它创建一个节点的克隆，使用 white-space：nowrap 将其设置为 inline 然后添加每个单词一次，将克隆宽度与p进行比较不是宽度。如果它更大，那么它将 display：table-caption 分配给原始div，否则它会添加下一个单词。

The only way I can see to resolve this is using javascript,
I made a uggly and probably overkilling snippet which does the work :
It creates a clone of the node, set it as inline with white-space: nowrap and then add each word one at a time, compare the clone width with parent's width. If it's larger, then it assigns display: table-caption to the orginal div, else it adds the next word.

CSS

div {
    display: inline-block;
    background-color:pink;
    margin-bottom:5px;
}
.caption {
    display : table-caption;
}
.cloned {
    visibility : hidden;
    white-space : nowrap;
}

Javascript

 var clone, el,w;

(cloneIt)();
function cloneIt(){
    el = document.getElementById('3');
    clone = el.cloneNode(true);
    clone.className = "cloned";
    el.parentNode.appendChild(clone);
    w = clone.innerHTML.split(' ');
    wrapIt();
}
window.onresize = wrapIt;

function wrapIt(){
    clone.innerHTML = w[0]; //minimum content is first word
    for(i=1; i<w.length; i++){
        clone.innerHTML += w[i]+' ';//add next word
        if(i==w.length-1 && clone.offsetWidth <= el.parentNode.offsetWidth){
            //we're at the end and it's still smaller than parent width?
            el.style.width = clone.offsetWidth+ 1 + 'px';
            return;
            }
        if(clone.offsetWidth <= el.parentNode.offsetWidth){ 
            //add a new word
            continue;
        }
        //Gone too far? remove last word
        clone.innerHTML = clone.innerHTML.replace(w[i], '');
        el.style.width = clone.offsetWidth+ 1 + 'px';
        return;
     }
}

这里是小提琴

这篇关于使div宽度等于其中最长的单词/句子长度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！