调整浏览器大小时文本/结构中断

Question

我有以下结构：JSFiddle Demo

HTML＆amp; CSS代码如下：

HTML：

<ul>
    <li class="test"> Hello </li>  
    <li class="test"> Welcome </li>
    <li class="test"> Test Process </li>
    <li class="test"> Text Message </li>
</ul>

CSS

ul{

    width: 100%;
}

.test{
    height:20px;
    width:20%;
    border: 1px solid black;
    border-radius: 3px;
    display: inline-block;
    float: left;
    margin-left: 5px;
    text-align: center;
}

当我调整浏览器大小时，<li>标记窗口小部件结构正常工作（不会破坏），但窗口小部件中的文本会破坏：

我的问题是如何使小部件内的文本可调，以便它不会破坏。 有没有办法只使用CSS修复此问题？

Answer 1

提供

min-width:20%;

而不是

width:20%;

它应该有用..

小提琴：http://jsfiddle.net/ZZa8j/2/

Answer 2

如果您希望相应地进行展开，只需移除明确的height并设置min-height this即可。

如果您想剪切文字并指明用户剪切了文字，您可以使用text-oveflow等this属性。

.test{
 white-space:nowrap;
 overflow:hidden;
 text-overflow:ellipsis;
 /*other styles*/
}

如果您确实希望内容尽可能地扩展而scoll，则可以使用Paulie_D的table-cell approach，就像他在评论中提到的那样。

Answer 3

我的代理人阻止了您的图片，所以我不确定这是否是您需要的答案，但是您可以避免使用css属性空格在两个单词之间中断。

white-space:nowrap;

请参阅小提琴：http://jsfiddle.net/ZZa8j/4/

Answer 4

将min-width:450px;添加到<ul>。

检查我的 Fiddle Demo

<强> CSS

ul{
    min-width:450px;
    width: 100%;
}

.test{
    height:20px;
    width:20%;
    border: 1px solid black;
    border-radius: 3px;
    display: inline-block;
    float: left;
    margin-left: 5px;
    text-align: center;

}

<强> HTML

<ul>
    <li class="test"> Hello </li>
    <li class="test"> Welcome </li>
    <li class="test"> Test Process </li>
    <li class="test"> Text Message </li>
</ul>

Answer 5

Result

Code Demo

尝试：

overflow: hidden;
 min-width:100px;