CODEWITHSUNDEEP
htmlcsstext
anon
anon

Reputation:

Text formatting issue

I have text that contains the time and names of some presentations for upcoming conference. I want them to look like this (empty* means that, on browser resize, I don't want the text to come under the time. The space under the time should be empty):

12:30 - Lorem ipsum dolor sit amet, consectetur adipiscing elit.
        tae blandit sem molestie vel. Phasellus venenatis nunc
        libero, nec vestibulum

14:30 - Lorem ipsum dolor sit amet, consectetur adipiscing elit.
        Fusce orci, vitae blandit sem molestie vel. Phasellus
        venenatis nunc (empty) libero, nec vestibulum

I tried everything, but without luck. Any suggestions?

Upvotes: 0

Views: 49

Answers (1)

Quentin
Quentin

Reputation: 943207

So you have a collection of data, where each piece consists of two parts - a time and a description?

That is tabular data.

th, td { text-align: left; padding: 3px 2ex; vertical-align: top; }
<table>
    <thead>
        <tr>
            <th scope="col">Time
            <th scope="col">Description
    <tbody>
        <tr>
            <td>12:30
            <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer cursus pulvinar congue. Nulla in mollis ante. Ut sodales pharetra pulvinar. Duis ornare lectus at iaculis pharetra. Suspendisse orci mauris, pulvinar a ex id, tempus mattis libero. Donec eget suscipit mi, nec consectetur nulla. In dapibus lacus elit, eu viverra mauris scelerisque vel. Integer metus sem, molestie ut elit vitae, maximus pretium tellus. Curabitur et justo purus. Pellentesque nec pellentesque elit. Maecenas laoreet augue nec aliquam maximus. Praesent rutrum laoreet lacus, ut lobortis nibh consectetur id. Aliquam pellentesque egestas rutrum.
        <tr>
            <td>14:30
            <td>Nulla faucibus porttitor accumsan. Etiam convallis diam mi. Nullam vitae nunc turpis. Aliquam cursus venenatis purus, sed congue massa volutpat vitae. Vivamus laoreet auctor ex, consectetur vulputate elit. Maecenas elementum eget dolor ac pulvinar. Fusce posuere laoreet porta. Aliquam cursus enim ut placerat fermentum. Nam in facilisis enim. In a bibendum magna, in aliquam ipsum. Duis vel nulla nec mauris sagittis ultrices ut et ipsum. Suspendisse ac nisi ultricies, lacinia felis eu, posuere elit. Aenean et diam laoreet, viverra massa tempor, mattis erat. Praesent dignissim ullamcorper purus, at convallis nisl commodo non. Etiam a fringilla ante, ac facilisis nulla.
</table>

Upvotes: 1

Related Questions