当单词溢出时，是否可以将ul list li项分成两个相等的部分？

I have a list and what happens is this:

我有一个列表,会发生什么:

short item------------------------| (end of ul div)
short item
short item
really really really really long
item

短项------------------------ | (ul div的结尾)短项短项真的真的很长项

is it possible to make the width of the li shrink to fit two lines or to make the li break exactly in two? like so:

是否有可能使li的宽度缩小到两条线或使li断裂为两条?像这样:

really really really
really long item

真的真的很长项目

so that it looks more even? or is that impossible with css?

这样它看起来更均匀?或者用css是不可能的?

EDIT:

It's a regular ul li list (generated by the site), single level. Nothing special. I just don't like the effect because they (the li's) have a different color than the div that contains the list, so each li has a box that fits it, and the really long item's box looks off when there's just one or two overflowing words.

这是一个常规的ul li列表(由网站生成),单级。没什么特别的。我只是不喜欢这种效果,因为它们(li的)的颜色与包含列表的div不同,所以每个li都有一个适合它的盒子,当只有一个或两个时,真正长的项目的盒子会看起来很像满溢的话语。

I guess I'll have to find a way to do it with jquery or something. Setting a width or a max-width doesn't help, there already is one and even longer items would create an unnecesary number of lines.

我想我必须找到一种方法来使用jquery或其他东西。设置宽度或最大宽度没有帮助,已经存在一个甚至更长的项目将创建不必要的行数。

3 个解决方案

#1

I would try putting a width on the UL so it contains the Li

我会尝试在UL上放一个宽度,因此它包含Li

here is a tool to let you play with css i tried it here and seems to narrow down all the li's

这是一个让你玩css的工具我在这里尝试过,似乎缩小了所有的li

http://www.w3schools.com/css/tryit.asp?filename=trycss_navbar_horizontal_float

<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
width: 100px;
}

li {
  float: right;

}

a {
display: block;
width: 60px;
background-color: #dddddd;
}
</style>

#2

I don't think that breaking li into 2 equal parts is possible with only css, but you can set max-width property to li it will limit the width of your list.

我不认为仅使用css可以将li分成两个相等的部分,但是你可以将max-width属性设置为li它将限制列表的宽度。

html:

<ul>
    <li>short item</li>
    <li>short item</li>
    <li>short item</li>
    <li>really really really really long item</li>
</ul>

css:

li {
    max-width: 150px;
}

demo: http://jsfiddle.net/557t6p0k/

#3

Try adding a width=10% your <ul> tag like <ul="10%"><ul/ul> and play around with the number a little bit

尝试添加宽度= 10%的

#1