响应式悬停文本超过3个内联框

Question

我有三个在线框，我试图在悬停时无法获得响应文本。这是我的三个方框之一的代码，这里是响应结果：http://screencast.com/t/87vPEWeJln

＆＃13;

＆＃13;

CEIL(4.485 * 100) / 100 will return 4.49
FLOOR(4.485 * 100) / 100 will return 4.48

＆＃13;

ul.serv-img li {
  	display: block;
  	height: 303px;
  	margin: 0 1em 1em 0;
 	position: relative;
  	width: 347px;
	max-width: 100%;
}

span.serv-text {
  	background: rgba(0,0,0,0.5);
  	color: white;
  	cursor: pointer;
  	display: table;
  	height: 303px;
  	position: absolute;
  	top: 0;
    left: 0;
  	width: 347px;
	opacity: 0;
  	-webkit-transition: opacity 500ms;
  	-moz-transition: opacity 500ms;
  	-o-transition: opacity 500ms;
  	transition: opacity 500ms;
}

span.serv-text span {
  	display: table-cell;
	padding-top: 20px;
  	text-align: center;
  	vertical-align: top;
}


ul.serv-img li:hover span.serv-text {
  	opacity: 1;
}

＆＃13;

＆＃13;

＆＃13;

Answer 1

尝试使用overflow:hidden 也是为了截断您可以尝试的长文本：

 white-space: nowrap
  overflow: hidden
  text-overflow: ellipsis // This is where the magic happens