CSS旋转文本超出行高

Question

我有以下文字（“作业提供”），我正在努力使它不会被切断，你可以看到。它被旋转，超过了它的行边界。

我的代码目前如下：

HTML

<div id="fade-in"><p *ngIf="jobModel.type === 1">Job Offered</p></div>

CSS

#fade-in p {
    margin-top: 25px;
    font-size: 21px;
    text-align: center;
    animation: fadein 8s;
    -moz-animation: fadein 8s; /* Firefox */
    -webkit-animation: fadein 8s; /* Safari and Chrome */
    -o-animation: fadein 8s; /* Opera */
    -webkit-transform: rotate(-35deg); 
    -moz-transform: rotate(-35deg);
}

如果有人可以协助我如何在不增加行高的情况下显示全文，我将不胜感激。