How to organize this layout with overflows?

2019-06-05 13:03发布

站内问答 / HTML/CSS
618 3 6

I'm having trouble with some div's position and layout.

The layout I want: image here

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.

I have the following code:

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

标签： css layout html
举报
3条回答
Fickle 薄情
2楼-- · 2019-06-05 13:32

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;
}
查看更多
0人赞 添加讨论(0) 举报
Lonely孤独者°
3楼-- · 2019-06-05 13:35

Here is an attempt that seems to work: http://jsfiddle.net/3nCuJ/ (spelled out below)

Specifically, I made the title float right, rather than the subtitle floating left. This makes sure the entire title is visible, on top of the subtitle. Then in order to make the subtitle clip properly I added an inner div to contain the subtitle text.

If you want the subtitle to stop at a word boundary use this instead: http://jsfiddle.net/3nCuJ/1/

HTML:

<div class="outer">
  <div class="title">Title number 1</div>
  <div class="subtitle"><div class="subtitle_inner">This is subtitle that is longer with even more text</div></div>
</div>

CSS:

.outer {
    height: 25px;
    width: 300px;
}
.title {
    height: 23px;
    float: right;
    border:1px solid red;
}
.subtitle {
    height: 23px;
    overflow:hidden;
    border: 1px solid blue;
}
.subtitle_inner {
    width: 300px;
}
查看更多
0人赞 添加讨论(0) 举报
Anthone
4楼-- · 2019-06-05 13:50

Hi it may not be the perfect solution but it is working... it can be a good start.

I positionned the main title over the sub title using the absolute positionneing and hide the subtitle text using a color bakground in the main title div.

<html>
<head>
   <style type="text/css">
.title {
    height: 25px; 
    width: 300px; 
    position: relative;
}
.maintitle
{
    height: 25px; 
    border:1px solid red;
    font-size: 21px;
    position: absolute;
    top: 0;
    right: 0;
    z-index: 2;
    padding-left: 10px; /* to give space to the left on the main title */
    background-color: #ffffff; /* to hide the text under it. */
}
.subtitle {
    height: 20px; 
    overflow:hidden; 
    border: 1px solid blue;
    max-width: 290px; /* to make sure the sub-title dont fall on two line */
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
}

    </style>
</head>

<body>
   <div class="title">
        <div class="maintitle">
            Title number 1
        </div>  

        <div class="subtitle">
            This is subtitle that is longer with even more text
        </div>
   </div>
</body>
</html>
查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(6)