在Umbraco中使用局部视图

Question

我正在使用网格编辑器和部分视图，但我遇到了一些麻烦，因为我正在测试所有内容，我试图测试我在JSFiddle中尝试做什么，它的工作原理是应该是，但在Umbraco，它不能正常工作。这就是我想要的：JSFiddle。

.work-item {
    height:300px;
    width:350px;
}

.work-item-image {
    top:0;
}

.work-item-image img {
    max-height: 150px;
    max-width: 350px;
    object-fit: cover;
}

.work-item-text {
    margin: 0 auto;
    padding: 30px 3px 3px 30px;
	height:150px;
    max-height: 150px;
    max-width: 350px;
	background-color:black;
} 

img {
    display: block;
    max-width: 100%;
    height: auto;
    margin: 0 auto;
}

.work-item-image:hover {
    background-color: black;
}

.work-item-image:hover img {
    opacity: 0.8;
}

.work-item-text:hover {
	background-color:white;
}

.work-item-text-title {
	font-family: verdana; 
   	font-size: 20px; 
   	font-weight: bold; 
   	background: #ffffcc;
   	color: green; 
   	line-height: 18px;
	text-align:center;
}

.work-item-text-description {
	font-family: verdana; 
   	font-size: 15px;
   	color: green; 
   	line-height: 18px;
}

<div class="work-item">
			<a href="#">
				<div class="work-item-image"> 
					<img src="http://posshop.weebly.com/uploads/4/6/6/5/46650449/s317130528826496337_p7_i1_w1000.jpeg"/>
				</div>
				<div class="work-item-text" height="150" width="350">
					<div class="work-item-text-title">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla volutpat justo non quam lobortis congue<br></div>
					<div class="work-item-text-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla volutpat justo non quam lobortis congue</div>
				</div>
			</a>
	</div>

在JSFiddle中，它工作得很好，但在Umbraco中，我的文字溢出了div，对于Umbraco而言，如果文本长于一行，它将仅在一行外的框中继续。

我认为问题不在html或css中，因为它在JSFiddle中正常工作，那么它会是什么呢？非常感谢对此的一些见解！

提前谢谢，尼尔森