Skip welcome & menu and move to editor
Welcome to JS Bin
Load cached copy from
 
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>float 和 text-overflow: ellipsis 问题测试</title>
<head>  
<style>
  body{
    padding-top:50px;
  }
  .normal {
    overflow: hidden;
    white-space: nowrap;
    margin: 20px 0;
    background: yellowgreen;
  }
 input {
    float: right;
    margin: 5px;
  }
 .ellipsis {
    text-overflow: ellipsis;
  }
 span {
    background: yellow;
  }
</style>
</head>
<body>
<div class="normal">
<input type="text">
1. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</div>
<div class="normal ellipsis">
<input type="text">
2. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</div>
</body>
</html>
Output 300px

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers