My html-code generated php-script. If the punctuation mark is wrapped in a separate tag and is on the next line, an unwanted space appears between this punctuation mark and the preceding word:

text1; text2; text3; text4; ...

see screenshot

Is it possible to somehow cancel the line break in the html-code and ensure that the user in the browser displays text and punctuation marks without spaces?

@if ('' != $wmeaning->multi_translation) <span class='tvb_wmmt'>{{ $wmeaning->multi_translation }}</span><span class='semicolon'>;</span> @endif @foreach ($bridge->translationAdditions as $translationAddition) @if (!empty($translationAddition->translation_addition)) <span class='tvb_ta'>{{ $translationAddition->translation_addition }}</span> @endif @if (!empty($translationAddition->translation_comment)) <span class='tvb_tc'>{{ $translationAddition->translation_comment }}</span> @endif @if (!empty($translationAddition->translation_operand)) <span class='tvb_to'>{{ $translationAddition->translation_operand }}</span> @endif <span class='semicolon'>;</span> @endforeach
  • 2
    Give the code that generates html. Or try to further process the response from the method that generates the markup. Something like $html = str_replace('</span>\n<span>', '</span><span>', $obj->genHtml()); - Igor Karpenko
  • one
    And what styles are hung on the semicolon class? can there paddings or margins or something else - Alexey Shimansky
  • 2
    @ Alexey Shimansky, no, this is a standard space between inline elements - Grundy
  • And why do you have in one case, the markup is generated with the transfer, and in others (above and below the example in the picture) without the transfer, though ; also in a separate tag? - Grundy
  • I am using the Laravel framework and its blade templating engine. Not sure that you can remove these spaces regularly. The code from the Laravel view is in the question description. - Abaza

2 answers 2

UPD 3 . Standing on a separate line ; give another class <span class='semicolon-alone'>;</span> , which should be assigned margin-left: -10px; . Value fit to the size of the font.

 .container { font-size: 40px; } .semicolon-alone { margin-left: -10px; ) 
 <div class="container"> <span class="text">text</span><span class="semicolon">;</span> <br> <span class="text">text</span> <span class="semicolon-alone">;</span> </div>

UPD 2 . Taking into account the comments to the answer, I propose three more options.

1) Learn how to insert more serious pieces of PHP, collect the line without extra spaces and display it entirely. Did not work with Laravel. Something like this is needed:

 $tmp = ""; if (!empty($translationAddition->translation_addition)) { $tmp .= "<span class='tvb_ta'>" . $translationAddition->translation_addition . "</span>"; } if (!empty($translationAddition->translation_comment)) { $tmp .= "<span class='tvb_tc'>" . $translationAddition->translation_comment . "</span>"; } if (!empty($translationAddition->translation_operand)) { $tmp .= "<span class='tvb_to'>" . $translationAddition->translation_operand . "</span>'; } $tmp .= "<span class='semicolon'>;</span>";

2) Close comments on the condition. There will be many, many comments.

 @if ('' != $wmeaning->multi_translation) <span class='tvb_wmmt'>{{ $wmeaning->multi_translation }}</span><span class='semicolon'>;</span> @endif @foreach ($bridge->translationAdditions as $translationAddition) @if (!empty($translationAddition->translation_addition)) <span class='tvb_ta'>{{ $translationAddition->translation_addition }}</span><!-- @endif @if (!empty($translationAddition->translation_comment)) @if (!empty($translationAddition->translation_addition)) --> @endif <span class='tvb_tc'>{{ $translationAddition->translation_comment }}</span><!-- @endif @if (!empty($translationAddition->translation_operand)) @if (!empty($translationAddition->translation_addition) || !empty($translationAddition->translation_comment)) --> @endif <span class='tvb_to'>{{ $translationAddition->translation_operand }}</span><!-- @endif --><span class='semicolon'>;</span> @endforeach

3) Only reset the font size of the contents of the loop. To do this, wrap it in an extra span.

 .kill-the-space { font-size: 0; } .text, .semicolon { font-size: 20px; ) @foreach ($bridge->translationAdditions as $translationAddition) <span class='kill-the-space'> @if (!empty($translationAddition->translation_addition)) <span class='tvb_ta'>{{ $translationAddition->translation_addition }}</span> @endif @if (!empty($translationAddition->translation_comment)) <span class='tvb_tc'>{{ $translationAddition->translation_comment }}</span> @endif @if (!empty($translationAddition->translation_operand)) <span class='tvb_to'>{{ $translationAddition->translation_operand }}</span> @endif <span class='semicolon'>;</span></span> @endforeach

UPD . I suggest adding HTML comments to your code to hide the gap between spans:

 @if ('' != $wmeaning->multi_translation) <span class='tvb_wmmt'>{{ $wmeaning->multi_translation }}</span><span class='semicolon'>;</span> @endif @foreach ($bridge->translationAdditions as $translationAddition) @if (!empty($translationAddition->translation_addition)) <span class='tvb_ta'>{{ $translationAddition->translation_addition }}</span><!-- @endif @if (!empty($translationAddition->translation_comment)) <span class='tvb_tc'>{{ $translationAddition->translation_comment }}</span><!-- @endif @if (!empty($translationAddition->translation_operand)) <span class='tvb_to'>{{ $translationAddition->translation_operand }}</span><!-- @endif --><span class='semicolon'>;</span> @endforeach

If the program does not digest this, then clone a semicolon:

 @if ('' != $wmeaning->multi_translation) <span class='tvb_wmmt'>{{ $wmeaning->multi_translation }}</span><span class='semicolon'>;</span> @endif @foreach ($bridge->translationAdditions as $translationAddition) @if (!empty($translationAddition->translation_addition)) <span class='tvb_ta'>{{ $translationAddition->translation_addition }}</span><span class='semicolon'>;</span> @endif @if (!empty($translationAddition->translation_comment)) <span class='tvb_tc'>{{ $translationAddition->translation_comment }}</span><span class='semicolon'>;</span> @endif @if (!empty($translationAddition->translation_operand)) <span class='tvb_to'>{{ $translationAddition->translation_operand }}</span><span class='semicolon'>;</span> @endif @endforeach

And this is how you can plug the hole with styles:

 .container { font-size: 0; } .text, .semicolon { font-size: 20px; ) 
 <div class="container"> <span class="text">text1</span><span class="semicolon">;</span> <br> <span class="text">text2</span> <span class="semicolon">;</span> <br> <span class="text">text3</span> <span class="semicolon">;</span> </div>

  • @Abaza Completed the answer with the code you added. - Gleb Kemarsky
  • Figured option with comments. But he does not ride, because if two or more conditions work at the same time, the beginning of the comment after the first condition will spread to the 2nd block. - Abaza
  • The same applies to the variant with cloning <span class="semicolon">;</span> - because if all 3 conditions return true , then the symbol ; will stand after each of them, and I need to put it once at the end, after working out all the conditions - Abaza
  • The variant with styles is also not suitable, since in the class of container I have a lot of different child elements and then everyone will have to set an individual font-size , otherwise the tags with the contents will no longer be displayed. In the example to the question for simplicity, I removed all the excess, otherwise the code would take up too much space. - Abaza
  • one
    The option with wrapping the line in the span did not fit. The reason is the same multi-level nesting conditions. Depending on the conditions that are triggered, the .kill-the-space class either solves the problem, or vice versa — it creates the necessary space by eating. But the solution with margin-left seems to solve the problem. In my case, it was -4px . At least, visually looks fine. Of course, with copy-paste of the text, say in a notebook, this space again spoils the whole picture :) In any case, thank you for your help. For the time being, I stopped at the option with margin-left: -4px; - Abaza

I tried this option, and it works unexpectedly. But I don’t know how valid it is to do so :) I think that in order to display correctly in the total mass of the text, each such piece of code needs to be wrapped in an additional wrapper with clear:both .

 .text { float: left; } 
 <div class="container"> <span class="text">text1</span><span class="semicolon">;</span> <br> <span class="text">text2</span> <span class="semicolon">;</span> <br> <span class="text">text3</span> <span class="semicolon">;</span> </div>

  • I tried float: left , but it does not fit, since it nails a symbol ; to the leftmost edge of the div, i.e., the text, after which the symbol must follow ; , turns to the right is a semicolon - Abaza
  • @Abaza, I have a float not for a semicolon, but for text before :) - MasterAlex
  • Yes, I was wrong. But then checked by writing correctly. It still does not suit me, since there on the left one has to place a lot of different elements, which are then nailed to the left too. It turns out something like this: text0text1; text2; text0text1; text2; In the description above, text0 , depending on the result of checking the if(){} block, may or may not be present - Abaza