css水平文字切割

Question

我有两个响应式div，一个带图像，一个带文字，两个宽度都是66.6％。但我需要剪切文字干净，所以不会有一半的行。这可能与纯粹的css有关吗，与js一起使用吗？

here is what I dont want

我的代码：

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 1

你可以使用简单的css

overflow:scroll;

或简单地匹配字体大小。