Change title look with CSS

user_1067943 0
Viewed 54

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)?

css html
3 Answers

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>

user_137843180

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>

user_106987410

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?

Admin1
Related