如何阻止CSS重叠文本？

Question

我正在为大学创建一个网站，我不确定当我缩小网页浏览器时如何阻止文本重叠。这就是我的意思：

（不重叠）

（重叠）

这是我的jsfiddle :( http://jsfiddle.net/RC4Ar/）

.words {
font-family:apple;
font-size:20px;
max-width:800px;
height:190px;
margin-top:10px;
margin-left:42%;
}

提前致谢！

Answer 1

假设您要将words类添加到段落标记中（不使用html，我们只能猜测），您只需要删除height声明。

.words {
font-family: apple;
font-size: 20px;
max-width: 800px;
margin-top: 10px;
margin-left: 42%; }

Answer 2

对于你的小提琴示例，我会将title_bar更改为最小高度而不是固定高度。这将使其能够响应而不是重叠在以下文本上。

#title_bar {
    margin-top:78px;
    left:-17px;
    width:101.5%;
    min-height:30px;
    background:blue;
    position:relative;
    top:-70px;
    z-index:3;
    border: 3px rgba(255, 105, 180, 1) solid;
    background-image: -webkit-gradient(linear, right bottom, right top, color-stop(0, #5977FF), color-stop(1, #59C5FF));
    background-image: -o-linear-gradient(top, #5977FF 0%, #59C5FF 100%);
    background-image: -moz-linear-gradient(top, #5977FF 0%, #59C5FF 100%);
    background-image: -webkit-linear-gradient(top, #5977FF 0%, #59C5FF 100%);
    background-image: -ms-linear-gradient(top, #5977FF 0%, #59C5FF 100%);
    background-image: linear-gradient(to top, #5977FF 0%, #59C5FF 100%);
}

Fiddle