Mam duży akapit tekstu, który jest podzielony na akapity z <br>:

<p>
  Blah blah blah.
  <br/>
  Blah blah blah. Blah blah blah. Blah blah blah.
  <br/>
  Blah blah blah.
</p>

Chcę poszerzyć lukę między tymi akapitami, tak jakby były dwie <br>lub coś takiego. Wiem, że właściwym sposobem na to jest użycie<p></p> , ale w tej chwili nie mogę zmienić tego układu, więc szukam rozwiązania tylko dla CSS.

Próbowałem ustawienie <br>„y line-heighti heightz display: block, ja też Googled i przepełnienie stosu-ed krótko, ale nie znaleźliśmy żadnego rozwiązania. Czy to w ogóle możliwe bez zmiany układu?

Css:

br {
   display: block;
   margin: 10px 0;
}

Rozwiązanie prawdopodobnie nie jest kompatybilne z różnymi przeglądarkami, ale przynajmniej jest coś. Weź również pod uwagę ustawienie line-height:

line-height:22px;

W przypadku Google Chrome rozważ ustawienie content:

content: " ";

Poza tym myślę, że utknąłeś w rozwiązaniu JavaScript.

Oto prawidłowe rozwiązanie, które faktycznie obsługuje wiele przeglądarek:

  br {
        line-height: 150%;
     }

Więc powyższe peepy mają w zasadzie podobną odpowiedź, ale tutaj jest to bardzo zwięźle. Działa w Opera, Chrome, Safari i Firefox, najprawdopodobniej też w IE?

br {
            display: block; /* makes it have a width */
            content: ""; /* clears default height */
            margin-top: 0; /* change this to whatever height you want it */
}

Innym sposobem jest użycie HR . Ale i tutaj jest przebiegła część, spraw, aby była niewidoczna.

A zatem:

<hr style="height:30pt; visibility:hidden;" />

Aby symulować czystszą przerwę BR za pomocą HR: Btw działa we wszystkich przeglądarkach !!

{ height:2px; visibility:hidden; margin-bottom:-1px; }

O ile wiem <br>, nie ma wysokości, jedynie wymusza przerwanie linii. To, co masz, to tekst z pewnymi podziałami linii oprócz automatycznego zawijania, a nie akapity. Możesz zmienić odstępy między liniami, ale wpłynie to na wszystkie linie.

Właśnie miałem ten problem i obejrzałem go za pomocą

<div style="line-height:150%;">
    <br>
</div>

możesz zastosować wysokość linii do tego <p>elementu, aby linie stały się większe.

Nie próbowałem wcześniej pseudoelementu :before/ :afterCSS2, głównie dlatego, że jest on obsługiwany tylko w IE8 (dotyczy to przeglądarek IE) . Może to być jedyne możliwe rozwiązanie CSS:

br:before {
    display: block;
    margin-top: 10px;
    content: "";
}

Oto przykład na QuirksMode .

Pomyślałem, że możesz użyć:

br:after {
    content: ".";
    visibility: hidden;
    display: block;
}

Ale to nie działało na Chrome ani Firefox.

Pomyślałem, że wspomnę o tym, na wypadek, gdyby ktoś przyszedł mi do głowy, i oszczędzę im kłopotów.

br {   
    content: "";
    margin: 2em;
    display: block;
    margin-bottom: -20px; 
 }

Działa w Firefox, Chrome i Safari. Nie testowałem w Eksploratorze. (Brak tabletu z systemem Windows).

Podziały wierszy, rozmiar czcionki działa inaczej w Firefox i Safari.

Co ciekawe, jeśli tag przerwania jest napisany w pełnej formie w następujący sposób:

<br></br>

następnie wysokość linii CSS: 145% działa. Jeśli tag przerwania jest zapisany jako:

<br> or 
<br/> 

to nie działa, przynajmniej w Chrome, IE i Firefox. Dziwne!

To, co działa dla mnie, to dodawanie tego tekstu między tagami akapitów ... ale nie jest to najlepsze rozwiązanie.

<br style="line-height:32px">

-------- Edytować ---------

Wystąpiły problemy z komputerem PC / Mac z tym ... Nadaje tekstowi nową wysokość linii, ale nie robi podziału linii ... Możesz sam zrobić kilka testów. Przepraszam!

I pamiętaj, że (błędne) użycie <hr>tagu, gdzieś sugerowane, zakończy <p>tag, więc zapomnij o tym rozwiązaniu.
Jeśli np. coś jest otoczone <p>stylem, ten styl zniknął dla reszty treści po <hr>wstawieniu.

Oto rozwiązanie, które działa w IE, Firefox i Chrome. Pomysł polega na zwiększeniu rozmiaru czcionki elementu br z rozmiaru ciała 14px do 18px i obniżeniu elementu o 4px, aby dodatkowy rozmiar znalazł się poniżej linii tekstu. Wynikiem jest 4 piksele dodatkowej spacji poniżej br.

br 
{ 
font-size: 18px; 
vertical-align: -4px; 
}  

AKTUALIZACJA 13 września 2019:

Używam <br class=big>aby przewymiarowany podział wiersza, kiedy potrzebujesz. Do dzisiaj stylizowałem to w następujący sposób:

br.big {line-height:190%;vertical-align:top}

( vertical-align:topByło potrzebne tylko dla IE i Edge.)

Działało to we wszystkich głównych przeglądarkach, które wypróbowałem: Chrome, Firefox, Opera, Brave, PaleMoon, Edge i IE11.

Jednak ostatnio przestał działać w przeglądarkach Chrome : moje „duże” podziały linii zamieniły się w normalne rozmiary.

(Nie wiem dokładnie, kiedy go złamali. Od 12 września 2019 r. Nadal działa w mojej nieaktualnej wersji Chromium Portable 55.0.2883.11, ale jest zepsuty w Operze 63.0.3368.71 i Chrome 76.0.3809.132 (oba Windows i Android).)

Po kilku próbach i błędach otrzymałem następujący substytut, który działa w aktualnych wersjach wszystkich przeglądarek:

br.big {display:block; content:""; margin-top:0.5em; line-height:190%; vertical-align:top;}

Uwagi:

line-height:190% działa we wszystkim oprócz najnowszych wersji przeglądarek Chrome.

vertical-align:topjest potrzebny IE i Edge (w połączeniu z line-height:190%), aby uzyskać dodatkową przestrzeń po poprzedniej linii, do której należy, a nie częściowo przed i częściowo po.

display:block;content:"";margin-top:0.5em działa w Chrome, Opera i Firefox, ale nie Edge i IE.

Alternatywnym (prostszym) sposobem dodania odrobiny dodatkowej przestrzeni pionowej po <br>tagu, jeśli nie masz nic przeciwko edycji HTML, jest coś takiego. Działa dobrze we wszystkich przeglądarkach:

<span style="vertical-align:-37%"> </span><br>

(Możesz oczywiście dostosować „-37%” w zależności od potrzeb, dla większej lub mniejszej luki.) Oto strona demonstracyjna, która zawiera kilka innych odmian motywu:

https://burtonsys.com/a_little_extra_vertical_space_for_br_tag.html



28 maja 2020 r .:

Zaktualizowałem stronę demonstracyjną; teraz pokazuje wszystkie powyższe techniki:

https://burtonsys.com/a_little_extra_vertical_space_for_br_tag.html

Michael i Yoda mają rację. Możesz użyć <p>znacznika, który, będąc znacznikiem bloku, wykorzystuje dolny margines, aby przesunąć następny blok, dzięki czemu możesz zrobić coś podobnego, aby uzyskać większe odstępy:

<p>
    A block of text.
</p>
<p>
    Another block
</p>

Inną alternatywą jest użycie <hr>znacznika bloku , za pomocą którego można jawnie zdefiniować wysokość odstępów.

<br />zajmie tyle samo miejsca, co wypełniony tekstem wiersz <p>, nie można tego zmienić. Jeśli chcesz powiększyć, oznacza to, że chcesz podzielić na akapit, więc dodaj inne <p>. Nie zapomnij być najbardziej semantycznym, jaki możesz;)

możesz także użyć właściwości „block-quote” w CSS. Dzięki temu nie wpłynie to na Twoje pojedyncze wiersze, ale pozwoli ci ustawić parametry tylko dla przerw między akapitami lub „cudzysłowami blokowymi”.

AKTUALIZACJA:
Poprawiłem się. „blockquote” jest właściwie właściwością HTML. Używasz go tak jak <p> i </ p> wokół swojej pracy. Następnie możesz ustawić parametry swojego cytatu blokowego w css like

blockquote { margin-top: 20px }

Mam nadzieję że to pomoże. Jest podobny do ustawiania parametrów na br i może, ale nie musi, być kompatybilny z różnymi przeglądarkami.

Wygląda na to, że nie możesz regulować wysokości BR, ale możesz sprawić, że zniknie niezawodnie za pomocą wyświetlacza: brak

Przejść na tę stronę, szukając rozwiązania następujących problemów:

Mam sytuację, w której zewnętrzna platforma płatności (Worldpay) pozwala tylko dostosować strony płatności za pomocą maksymalnie 10 KB CSS i HTML (bez skryptu), które są wstrzykiwane do treści szablonu, a po kilku BR, tagach FONT itp. W połączeniu z DTD, które zmusza IE7 / 8 do trybu dziwactwa, sprawia, że ​​dostosowywanie w różnych przeglądarkach jest tak trudne, jak to możliwe!

Wyłączenie BR's sprawia, że ​​wszystko jest o wiele bardziej spójne ...

Używam tych metod, ale nie wiem, czy działa w różnych przeglądarkach

================= Metoda 1 ==================

br {
    display:none;
}

LUB

================= Metoda 2 ==================

br {
    display: block;
    margin-bottom: 2px;
    font-size:2px;
    line-height: 2px;
}
br:before {
    display: block;
    margin-top: 2px;
    content: "";
}
br:after {
    content: ".";
    visibility: hidden;
    display: block;
}

LUB

================= Metoda 3 ==================

br:after { content: "" }
br { content: "" }

Spróbuj użyć line-heightatrybutu CSS w ptagu, który zawiera brtag. Pamiętaj, że możesz zrobić idswoje ptagi, jeśli chcesz je wyodrębnić, chociaż lepiej byłoby użyć divIMO do izolacji.

Przepraszam, jeśli ktoś już to powiedział, ale prostym rozwiązaniem jest zabawienie się z „wysokością linii”. Jeśli masz zbyt dużo miejsca, gdy używasz podziału linii, to po prostu dlatego, że wysokość linii jest ustawiona zbyt wysoko. Możesz to poprawić w CSS (ale wiedz, że wpłynie to na wszystko, co korzysta z tej właściwości) lub możesz zastosować styl wbudowany, aby zastąpić CSS.

Musiałem opracować rozwiązanie do konwersji HTML na PDF i pionowo wyśrodkować tekst w komórkach tabeli, ale nic nie działało oprócz wprowadzenia zwykłego tekstu <br>

Tak więc, myśląc poza ramką, zmieniłem rozmiar pionowy, dostosowując rozmiar czcionki (w pt).

<font style="font-size: 4pt"><br></font>

<span style="line-height:40px;"><br></span> 

Będziesz musiał zrobić to w linii i na każdym
elemencie, ale powinien działać w większości przeglądarek Fiddle z wysokością linii, aby uzyskać pożądany efekt. Jeśli umieścisz go w linii na każdym elemencie, powinien on działać w większości przeglądarek i poczty e-mail (ale jest to zbyt skomplikowane, aby omówić tutaj).

To załatwiło sprawę, gdy nie mogłem uzyskać odstępów między stylami z tagu span:

        <p style='margin-bottom: 5px' >
            <span>I Agree</span>
        </p>
        <span>I Don't Agree</span>

Posługiwać się <div>

<div>Content 1</div>Content 2

Pozwala to na utworzenie nowej linii bez przestrzeni pionowej.

To się staje

<div>Content 1</div>Content 2

Odpowiedzi na bardziej ogólny poziom dla każdego, kto tu wylądował, ponieważ rozwiązują problemy z odstępami spowodowane przez <br>tag. Muszę wykonać wiele resetu, aby zbliżyć się do idealnego piksela.

br {
    content: " ";
    display: block;
}

W przypadku konkretnego problemu, który rozwiązałem, musiałem mieć określoną przestrzeń między wierszami. Dodałem margines na górze i na dole.

br {
    content: " ";
    display: block;
    margin: 0.25em 0;
}

Dostałem go do pracy w IE7, używając zestawu rozwiązań, ale głównie pakując Br w DIV, jak sugerowali Nigel i inni. Dodano identyfikator i uruchomiłem na = "serwer", abym mógł usunąć BR podczas usuwania pola wyboru z rzędu pól wyboru.

.narrow {
    display: block;
    margin: 0px;
    line-height: 0px;
    content: " "; 
}

<div class="narrow" run at="server"><br></br></div>

Może być użycie dwóch tagów br to najprostsze rozwiązanie, które działa ze wszystkimi przeglądarkami. Ale to jest powtarzalne.

<p>
content
</p>
<br /><br />
<p>
content
</p>
<br /><br />
<p>
content
</p>

A może tak po prostu dodać akapit zamiast podziału wiersza

bla la la bla bla abla la la bla bla abla la la bla bla a

Następnie możesz określić wysokość linii, dopełnienie lub cokolwiek innego dla tego p