CODEWITHSUNDEEP
htmlcss
JohnDizzle
JohnDizzle

Reputation: 1338

Format HTML Text proper

How can I format my text with html and CSS to get something like this:

Animals: cat, dog, mouse,
         lion, tiger

I tried this but it doesnt´t work.

.column {
	width: 300px;
}

.fat-text {
	font-weight: bold;
	display: inline-block;
}

.listing {
	border: 1px solid red;
	display: inline-block;
}
<html>
<head>
</head>
<body>
	<div class="column">
		<span class="fat-text">Animals: </span><span class="listing">cat, dog, mouse, elephant, tiger, lion, penguin, lama, wolf</span>
	</div>

</body>
</html>

Upvotes: 0

Views: 54

Answers (3)

greenRed
greenRed

Reputation: 65

I would suggest to use flexbox for this:

    <!doctype html>
    <html>
        <head>
            <style type="text/css">
              .column {
                width: 300px;
                display: -webkit-box;
                display: -webkit-flex;
                display: -ms-flexbox;
                display: flex;
                -webkit-flex-flow: row nowrap;
                    -ms-flex-flow: row nowrap;
                        flex-flow: row nowrap;
              }
              .fat-text {
                font-weight: bold;
                margin-right: 8px;
              }
            </style>
        </head>
        <body>
          <div class="column">
            <span class="fat-text">Animals: </span><span class="listing">cat, dog, mouse, elephant, tiger, lion, penguin, lama, wolf</span>
          </div>

        </body>
    </html>

Upvotes: 1

luckwithu
luckwithu

Reputation: 143

Change the css for class listing added two property:

position: absolute;
    width: 113px; in case if you want fixed width 


.column {
	width: 300px;
}

.fat-text {
	font-weight: bold;
	display: inline-block;
}

.listing {
	border: 1px solid red;
position: absolute;
width: 113px;
	display: inline-block;
}
<html>
<head>
</head>
<body>
	<div class="column">
		<span class="fat-text">Animals: </span><span class="listing">cat, dog, mouse, elephant, tiger, lion, penguin, lama, wolf</span>
	</div>

</body>
</html>

Upvotes: 1

Rohit Azad Malik
Rohit Azad Malik

Reputation: 32182

Define width your .listing and define vertical-align:top as like this 

.column {
	width: 300px;
}

.fat-text {
	font-weight: bold;
	display: inline-block; vertical-align: top;
}

.listing {
	border: 1px solid red;
	display: inline-block;    width: 230px;
vertical-align: top;
}
<html>
<head>
</head>
<body>
	<div class="column">
		<span class="fat-text">Animals: </span><span class="listing">cat, dog, mouse, elephant, tiger, lion, penguin, lama, wolf</span>
	</div>

</body>
</html>

Upvotes: 2

Related Questions