How can I remove extra spaces caused by line breaks in the text, so that the background color is not excess?

Question

So that the background color is not excess?

<span class="box__title--tag">CB400CB400 CB400CB400 CB400CB400 CB400CB400 CB400CB400 CB400CB400 CB400CB4001</span>
<span class="box__title--tag">CB400CB400 CB400CB400 CB400CB400 CB400CB400 CB400CB400 CB400CB400 CB400CB4001</span>

css:

span.box__title--tag {
  text-align: left;
  text-decoration: none;
  margin: 5px 2px;
  background-color: rgb(98, 124, 169, 0.8);
  color: white;
  display: inline-block;
  line-height: 1;
  vertical-align: middle;
}

My wish: retain meaning when paragraph breaks

consider reading the duplicate instead of repeating the question (https://stackoverflow.com/q/65101124/8620333) .. the answer is: you cannot — Temani Afif, Dec 02 '20 at 11:02
what is you want is impossible and the duplicate explain why — Temani Afif, Dec 02 '20 at 15:35

score 1 · Answer 1 · answered Dec 02 '20 at 03:36

Remove your margin and add some padding. like this:

span.box__title--tag {
  text-align: left;
  text-decoration: none;
  padding: 5px;
  background-color: rgb(98, 124, 169, 0.8);
  color: white;
  display: inline-block;
  line-height: 1;
  vertical-align: middle;
}

<span class="box__title--tag">CB400CB400 CB400CB400 CB400CB400 CB400CB400 CB400CB400 CB400CB400 CB400CB4001</span>
<span class="box__title--tag">CB400CB400 CB400CB400 CB400CB400 CB400CB400 CB400CB400 CB400CB400 CB400CB4001</span>

Thanks for your answer, but it still doesn't fix the space on the right side when the text doesn't have enough newlines. I want to fix it. Do you have any other way? — halee, Dec 02 '20 at 03:50

Mostafa Tabrizian · Answer 2 · 2020-12-02T11:33:38.240

0

you can just change the display to inline and it will fix you issue and remove the white space after resizing the screen and also for the white things between the line put your text in div and change the css like this:

HTML:

<div class="container">
  <span class="box__title--tag">CB400CB400 CB400CB400 CB400CB400 CB400CB400 
   CB400CB400 CB400CB400 CB400CB4001</span>
</div>

<div class="container">
 <span class="box__title--tag">CB400CB400 CB400CB400 CB400CB400 CB400CB400 
   CB400CB400 CB400CB400 CB400CB4001</span>
</div>

CSS:

.box__title--tag {
  text-align: left;
  text-decoration: none;
  margin: 0 ;
  padding: 1px 0;
  color: white;
  display: inline;
  line-height: 1;
  vertical-align: middle;
  background-color: rgb(98, 124, 169, 0.8);
}
.container {
  padding: 5px 0;
 }

It will expand the background to bottom and the line between will disappear but the best is to use line-break but if you wish another thing this is the another one

tell me if you need anything

edited Dec 02 '20 at 11:33

answered Dec 02 '20 at 05:30

Mostafa Tabrizian

94
4

Thank you, that's almost what I wanted. Using 'display: inline' prevents the background color from covering the block. It just shows the background color for the text. Do you have any other way? – halee Dec 02 '20 at 06:58
i changed it you can see it now tell me if there is anything else – Mostafa Tabrizian Dec 02 '20 at 10:48
Your update is awesome. but this is only for the background color that covers the text. I want the background color to be surrounded by text to create a box shaped like in the image you want to attach. – halee Dec 03 '20 at 01:12

CodeBug · Answer 3 · 2020-12-02T07:29:54.880

-1

span.box__title--tag {
  text-align: left;
  text-decoration: none;
  margin: 5px 2px;
  background-color: rgb(98, 124, 169, 0.8);
  color: white;
  display: inline-block;
  line-height: 1;
  vertical-align: middle;
  object-fit: cover;
  word-break: break-all;
  width:30%;
}

<span class="box__title--tag">CB400CB400 CB400CB400 CB400CB400 CB400CB400 CB400CB400 CB400CB400 CB400CB4001</span>
<span class="box__title--tag">CB400CB400 CB400CB400 CB400CB400 CB400CB400 CB400CB400 CB400CB400 CB400CB4001</span>

here you can use word-break CSS to get this done.

edited Dec 02 '20 at 07:29

answered Dec 02 '20 at 04:17

CodeBug

1,649
1
8
23

Thank you, that's almost what I wanted, I tried it. But is there a way to not get cut off the text and still fix the space on the right side? That will make the text difficult to understand its meaning. – halee Dec 02 '20 at 05:04
then you need to give one range of width to the span which will set to all size of devices (ex:- ` width: 150px;`) – CodeBug Dec 02 '20 at 05:44
Thank ! Text sizes have different lengths, I want it to be automatically on many different devices instead of being fixed. – halee Dec 02 '20 at 06:52
you can use `%` for that, check my updated answer. – CodeBug Dec 02 '20 at 07:30
Thank you very much. I want something similar to what you updated. When it doesn't use "word-break". Because it confuses the text. Do you have any other way? – halee Dec 02 '20 at 08:14

How can I remove extra spaces caused by line breaks in the text, so that the background color is not excess?

3 Answers3