Question

我已经尝试将列表溢出设置为overflow-text：省略号，但是当发生这种情况时，省略号本身会将浮动右侧文本推出（X按钮，具体而言）。

理想情况下，li文本会有溢出文本：椭圆形，当它太长时，并且X按钮位于相同行高的省略号的右侧，处于不受文本长度影响的固定位置它。

但是目前，如果你输入太长时间，X就会完全取代。

http://codepen.io/minuteofzen/pen/PwWjZe

$(document).ready(function() {

  var ul = $('ul'),
    input = $('input');

  input.focus();

  $('form').submit(function() {
    if (input.val() !== '') {
      var inputVal = input.val();
      ul.append('<li>' + inputVal + '<a href="">X</a></li>');
      if (ul.hasClass('inactive')) {
        ul.removeClass('inactive')
          .addClass('active');
      }
    };
    input.val('');
    return false;
  });

  ul.on('click', 'a', function(e) {
    e.preventDefault();
    $(this).parent().remove();

    if (ul.children().length == 0) {
      ul.removeClass('active')
        .addClass('inactive');
      input.focus();
    }
  });

});

@import url('http://fonts.googleapis.com/css?family=Droid+Sans:400,700');
 * {
  margin: 0;
  padding: 0;
}
body {
  background: teal;
  font-family: 'Droid Sans', sans-serif;
}
h1 {
  padding-left: 10px;
  font-size: 400%;
  color: #eee;
  text-shadow: 1px 1px 2px #222;
}
.container {
  width: 60%;
  margin: 50px auto;
}
form {
  margin: 10px auto;
}
input,
ul {
  background: #eee;
  border-radius: 5px;
  width: 100%;
  box-sizing: border-box;
}
input {
  padding: 10px 10px 10px 20px;
  border: 1px solid #ccc;
}
ul {
  list-style: square inside;
  padding: 10px;
}
.active {
  border: 1px solid #ccc;
}
.inactive {
  display: none;
}
li {
  padding: 10px;
  font-weight: 600;
  color: #34495e;
}
li:nth-child(odd) {
  background: #dadfe1;
  border-radius: 5px;
}
li > a {
  float: right;
  text-decoration: none;
  color: #22313f;
  font-weight: bold;
  transition: all .2s ease-in-out;
}
li > a:hover {
  font-size: 110%;
  color: #c0392b;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="container">

  <h1>What To-Do List</h1>

  <form action="">
    <input type="text" id="todo" placeholder="Enter a To-do and hit enter">
  </form>

  <ul class="active">
    <li>Work <a href="">X</a>
    </li>
    <li>Sleep <a href="">X</a>
    </li>
    <li>Repeat <a href="">X</a>
    </li>
  </ul>

</div>

Answer 1

text-overflow:ellipsis仅在元素具有固定宽度时有效。尝试更改列表以使用span（或仅display:block）将文本包装在div中，如下所示：

<ul class="active">
  <li><a href="">X</a><span>Work</span></li>
  <li><a href="">X</a><span>Sleep</span></li>
  <li><a href="">X</a><span>Repeat</span></li>
</ul>

然后，您可以为max-width设置text-overflow和li > span，它们应该相应地流动。您还会注意到X现在是第一个。通常，在使用float:right时，您希望将其放在任何其他内容之前so they both align at the top。

以下是您的代码的工作版本：http://codepen.io/anon/pen/VYRMOp

如何防止li中溢出的文本将浮动右侧文本推出位置？

1 个答案: