Question

以下是我的代码

<div id="resultwrap">  
    <div id="wholenum"><div id="wholenumres">44444444444444444</div></div> 
    <div id="numer"><div id="numerres"></div>44444444444444444444444</div>
    <div id="denom"><div id="denomres"></div>44444444444444444444444</div>
</div>

这是一个分数。整数应位于左侧部分，分号和分母位于右侧部分。但是当分子和分母有太多的文本时，它不会溢出：隐藏但会下降。

我应该如何修复它？

Answer 1

我认为你需要漂浮 HTML：

<div id="resultwrap">
    <div id="wholenum">whole number value</div>
</div id="tow">
    <div id="numerator">dino</div>
    <div id="denominator">some value is hererss</div>    
</div>

CSS:
#wholenum{
        overflow:hidden;
        height:40px;  
        float:left;
    }
    #tow{
        float:left;
        height:40px;
        max-height:120px;


    }

DEMO

Answer 2

你说你想要最大宽度，但在你的jsfiddle中你只有max-height：

将您的代码更改为：

#resultwrap{
    max-width:120px; <!-- max-width --> 
    height:120px;
    background:blue;

}

Answer 3

这将有效Demo

<强> HTML

<div id="resultwrap">  
    <div id="wholenumres">wholenumres : 44444444444444444</div>
    <div class="numeranddenom">
       <div id="numerres">numerres : 444444444444444444444444444444444444444444444</div>
       <div id="denom">denom : 44444444444444444444444</div>
    <div>
</div>

<强> CSS

#resultwrap{
    width: 320px;
    background: rgba(0, 0, 255, 0.44);
    word-break: break-word;        
}

#wholenumres {
    display: inline-block;
    max-width: 49%;
    vertical-align: top;
}

.numeranddenom {
    display: inline-block;
    max-width: 49%;
}

最大宽度在html中不起作用

3 个答案: