CODEWITHSUNDEEP
htmlcss
Michael
Michael

Reputation: 13616

Change title look with CSS

I have an issue creating a title for a web page. Here is title: 

<!DOCTYPE html>
<html>
<head>
<style>

.title {
  border-top: 2px solid grey;
  color: grey;
  text-size:20px;
}
</style>
</head>
<body>
   <div class="title">Düsseldorf markets</div>
</body>
</html>

I need to move the market word to the bottom and it should be displayed like that:

Düsseldorf 
markets

Any idea how can I do it with the help of CSS only(i.e how can I change title CSS class to get desired view)?

Upvotes: 2

Views: 99

Answers (3)

doğukan
doğukan

Reputation: 27401

You can use padding-right with calculation. padding-right: calc(100% - 10ch); This is very simple, no complex.

.title {
  border-top: 2px solid grey;
  color: grey;
  font-size: 20px;
  padding-right: calc(100% - 10ch); /* Düsseldorf is 10 character */
  box-sizing: border-box;
}
<div class="title">Düsseldorf markets</div>

Upvotes: 1

itsanewabstract
itsanewabstract

Reputation: 1036

You can use a CSS hack to acheive this if you really want to use CSS only. First, make the text disappear by setting it to the color of the background. Then use the before and after selectors to rerender the content.

However, easier would be to use span tags in your HTML, then make each of them have display: block to get a line break.

Example:

<!DOCTYPE html>
<html>
<head>
<style>

:root {
  --font_size: 20px;
  --text_col: grey;
  --text_margin: 10px;
}

.title {
  border-top: 2px solid grey;
  font-size: var(--font_size);
  color: white;
}

.title:before {
   content: "Düsseldorf";
   color: var(--text_col);
   position: absolute;
   left: 10px;
   top: var(--text_margin);
}

.title:after {
   content: "markets";
   color: var(--text_col);
   position: absolute;
   left: 10px;
   top: calc(var(--font_size) + var(--text_margin));
}
</style>
</head>
<body>
   <div class="title">Düsseldorf markets</div>
</body>
</html>

Upvotes: 2

user13475226
user13475226

Reputation:

A simple way to approach this - use a width property on a element. Then, by word-break rule (which is 'normal' by default and you don't need to specify this) words will be auto-wrap on next line, when there is no free place on container

here is demo

P.S. And you have a typo - did you mean font-size except for text-size?

Upvotes: 0

Related Questions