Let element to fit the length of text

Question

.selectlist {
    width: auto;
    display: inline-block
  }
  .selectlist li {
    width: 60px;
    cursor: pointer;
    position: relative;
    left: 0;
    background-color: #EEE;
    margin: .5em;
    padding: .3em 0;
    height: 1.6em;
    border-radius: 4px;
  }

    <ul class="selectlist">
        <li>this is line test 1</li>
        <li>this is line 2</li>
        <li>this is line 3</li>
    </ul>

I am trying to modify the following make <li> or <ul> element to fit the length of given text with CSS only. The width: auto makes the elements occupy the whole screen width.

.ul {
    margin: 0 0 2em 0;
    list-style-type: none;
    padding: 0;
    width: auto;
}
.ul li {
    width: auto;
    cursor: pointer;
    position: relative;
    left: 0;
    background-color: #EEE;
    margin: .5em;
    padding: .3em 0;
    height: 1.6em;
    border-radius: 4px;
}

If it is not possible to make the list to fit the length of text then can I make the text fit into the given width of the element by modifying the above CSS?

Update: Thanks for all the replies. The above code formats list items to look like rectangle shape.

I tried all your suggestions and the text wraps into a second line which appear outside the rectangle shape. I just realized my question is limited to the above code scenario, not a general one.

Please see the snippet. I would like fixed length rectangle and make the text fit into it.

Do you need something like this: http://stackoverflow.com/questions/5976289/stretch-text-to-fit-width-of-div ? — Proggear, May 20 '16 at 14:58
`display: inline-block`, `inline-table` , `inline-flex` , and `table` will shrink to fit content — G-Cyrillus, May 20 '16 at 15:20
Questions seeking code help must include the shortest code necessary to reproduce it **in the question itself** preferably in a [**Stack Snippet**](https://blog.stackoverflow.com/2014/09/introducing-runnable-javascript-css-and-html-code-snippets/). See [**How to create a Minimal, Complete, and Verifiable example**](http://stackoverflow.com/help/mcve) — Paulie_D, May 20 '16 at 15:31

Sean Sylvester · Answer 1 · 2016-06-02T15:52:14.440

0

Do a list with in a container with rows of defined span. It will automatically start a new line rather than cutting off your text.

edited Jun 02 '16 at 15:52

answered May 20 '16 at 14:51

Sean Sylvester

17
9

1

Please do not use answers to ask clarification questions. – Jay Blanchard May 31 '16 at 17:38

score 0 · Answer 2 · answered May 20 '16 at 14:56

0

Set the .ul class to display:inline-block

answered May 20 '16 at 14:56

mgabz

673
1
9
17

Let element to fit the length of text

2 Answers2