- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="UTF-8">
- <title></title>
- <link rel="stylesheet" type="text/CSS" href="css/common.css"/>
- <style type="text/css">
- .box{
- width: 300px;
- margin: 20px auto;
- padding:10px;
- border: 1px solid deeppink;
- display: table;
- }
- .box .text{
- display: table-cell;
- vertical-align: middle;
- font-size: 10px;
- }
- .box .text .icon{
- display: inline-block;
- width: 15px;
- height:15px;
- line-height:15px;
- color:red;
- font-size:10px;
- background: #00BFFF;
- vertical-align: top;
- }
- </style>
- </head>
- <body>
- <div class="warp">
- <div class="box">
- <span class="text">
- <span class="icon">icon</span>
- 翱翔那 苍穹中 心不尽 纵横在 千年间 轮回转 为何让 寂寞长 我在世界这一边 对你的思念 怎能用千言万语说的清
- 说的清 只奢望一次醉 又想起 你的脸 寻寻觅觅 相逢在梦里
- </span>
- </div>
- <div class="box">
- <span class="text">
- <span class="icon">icon</span>
- 翱翔那 苍穹中 心不尽 纵横在 千年间 轮回转 为何让 寂寞长 我在世界这一边
- </span>
- </div>
- </div>
- </body>
- </html>
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="UTF-8">
- <title></title>
- <link rel="stylesheet" type="text/css" href="css/common.css"/>
- <style type="text/css">
- .box{
- width: 300px;
- padding: 20px;
- display: flex;
- display: -webkit-flex;
- margin: 40px auto;
- border: 1px solid #000000;
- }
- .left{
- flex: 0 0 80px;
- width: 80px;
- border: 3px solid #48F0FF;
- }
- .right{
- flex: 1;
- /*width:0解决超出省略问题*/
- width: 0;
- background: greenyellow;
- margin-left: 10px;
- white-space:nowrap;/*强制文本在一行内显示*/
- overflow:hidden; /*溢出内容为隐藏*/
- text-overflow:ellipsis;/* 当对象内文本溢出时显示省略标记(...)。*/
- }
- </style>
- </head>
- <body>
- <div class="warp">
- <div class="box">
- <div class="left">左侧——>宽度为80px固定不变</div>
- <div class="right">右侧——>距离左边10px,为除左侧以及边距的剩余长度</div>
- </div>
- </div>
- </body>
- </html>
来源: http://www.qdfuns.com/notes/37255/2a34bb153ed3caf7eab12c53560b64e7.html