如何组织这个布局与溢出？ [英] How to organize this layout with overflows?
本文介绍了如何组织这个布局与溢出？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我有一些div的位置和布局的麻烦。
I'm having trouble with some div's position and layout.
我想要的布局：
The layout I want:
我想标题总是出现在右边。
I want the title to always appear in full and on the right. The subtitle should appear on the left but with any overflow hidden so the title's length always takes precedent.
我有以下代码：
<html>
<head>
<style type="text/css">
.title {height: 25px; text-align:left; width: 300px; border:1px solid red;}
.subtitle {height: 20px; overflow:hidden; float:left; border: 1px solid blue;}
</style>
</head>
<body>
<div class="title">
Title number 1
<div class="subtitle">This is subtitle that is longer with even more text</div>
</div>
</body>
</html>
在分钟，如果字幕太长，它只是徘徊在底下。
任何想法？
At the minute if the subtitle is too long it just hovers underneath. Any ideas?
推荐答案
这是一个使用 text-overflow：ellipsis 。
This is a good time to use text-overflow: ellipsis.
http://jsfiddle.net/thirtydot/sxeu9/
HTML ：
<div class="row">
<div class="title">Title number 1</div>
<div class="subtitle">This is subtitle that is longer with even more text</div>
</div>
CSS：
.row {
width: 200px;
float: left;
border: 1px dashed #444;
padding: 3px;
}
.title {
float: right;
border: 1px solid #666;
}
.subtitle {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
border: 1px solid #f0f;
}
这篇关于如何组织这个布局与溢出？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
