Html 调整浏览器大小时，文本/结构会断开

我的结构如下：

HTML和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来解决这个问题？

提供

min-width:20%;

而不是

width:20%;

它应该有用

---

Fiddle:

如果希望它相应地展开，只需删除显式的

高度

并设置

最小高度

即可

如果要剪裁文本并向用户指示已剪裁文本，可以使用以下属性：

---

如果你真的想让内容尽可能扩展，如果不想，你可以使用他的

表格单元格
，就像他在评论中提到的那样。
你的图片被我的代理阻止了，所以我不确定这是否是你需要的答案，但是你可以使用css属性空格避免两个单词之间的中断

white-space:nowrap;

参见小提琴：
添加
最小宽度：450px至

检查我的

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;
}

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>


您好
欢迎光临
测试过程
文本消息



尝试：

你说的“不破裂”到底是什么意思？您希望发生什么？请尝试“溢出：隐藏；”@Ronen:Not break意味着相应地扩展：）也许CSS3的
@media screen
会有所帮助，检查您是否可以使用此处描述的
表格单元格布局
-处理溢出：在这种情况下隐藏但看不到全文。您是否检查了JSFIDLE链接？？全文已显示添加JSFIDLE屏幕截图是的，选中。请将浏览器大小调整3到4次。它将断开。在这种情况下，您需要为答案设置
minwidth
+1。是的，这种方法正在发挥作用，但在调整浏览器大小时，我的框结构也发生了变化，即框的大小、包含Hello的文本与其他文本相比变得更小，因此不一致。：）li只有ul的20%宽度。由于ul的宽度减小，li的宽度也减小。如果您提供固定宽度（在px中），我认为这个问题可以避免。好的。谢谢让我用像素检查一下这种方法。
<ul>
    <li class="test"> Hello </li>
    <li class="test"> Welcome </li>
    <li class="test"> Test Process </li>
    <li class="test"> Text Message </li>
</ul>

overflow: hidden;
 min-width:100px;