CSS 水平文本剪切

Question

我有两个响应式div，一个带有图像，一个带有文本，两者都是其宽度的 66,6% 高度。但是我需要将文本剪切干净，因此不会有一半的行。这可以用纯 css 做吗，用 js 做吧？

这是我不想要的

我的代码：

.head_news {
	width: 100%;
	overflow: auto;
}
.head_news .image {
	width: 45%;
	float: left;
	margin-right: 5%;
}
.head_news .image .auto_height {
	height: 0px;
	padding-bottom: calc(100% / 1.5);
	overflow:hidden;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	background-repeat: no-repeat;
	background-position: 50% 50%; 
	opacity: 1;
	-webkit-transition: opacity 0.25s;
    transition: opacity 0.25s;
}
.head_news .text {
	width: 45%;
	float: left;
}
.head_news .text .auto_height {
	height: 0px;
	padding-bottom: calc(100% / 1.5 - 2%);
	overflow:hidden;
	font-size: 14pt;
}
.head_news .text .auto_height h2 {
	font-size: 18pt;
}

<div class='head_news'>
			<div class='image'>
				<div class='auto_height' style='background-image: url(http://random-international.com/wp-content/uploads/2012/10/RR-home-img2.jpg);'></div>
			</div>
			<div class='text'>
      <div class='auto_height'>
      <h2>
					Some random title of unknown lenght
			</h2>
        Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vestibulum erat nulla, ullamcorper nec, rutrum non, nonummy ac, erat. Etiam dui sem, fermentum vitae, sagittis id, malesuada in, quam. Nulla pulvinar eleifend sem. Fusce tellus odio, dapibus id fermentum quis, suscipit id erat. Nulla accumsan, elit sit amet varius semper, nulla mauris mollis quam, tempor suscipit diam nulla vel leo. Nullam rhoncus aliquam metus. Nullam lectus justo, vulputate eget mollis sed, tempor sed magna. Aliquam erat volutpat. Nulla quis diam. Curabitur vitae diam non enim vestibulum interdum. Pellentesque arcu. Nulla quis diam. Duis viverra diam non justo. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean placerat. Sed vel lectus. Donec odio tempus molestie, porttitor ut, iaculis quis, sem.
        </div>
      </div>
		</div>

Answer 1

你可以使用简单的CSS

overflow:scroll;

或者只是匹配字体大小。