Jak zmienić wysokość zdjęcia?

263

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?

n1313
źródło
Twoje formatowanie może zwiększyć zamieszanie, ponieważ tagi br mają wartość wysokości. Jak wskazano poniżej, są to po prostu łamanie linii. Czy próbowałeś zrobić coś podobnego w edytorze tekstu?
Jörg,
Zmiana wysokości <br> jest semantycznie niepoprawna. <br> oznacza, że ​​po prostu wstawiłeś kolejną linię do tekstu, a pojedynczy akapit powinien mieć stałą wysokość linii. Jeśli jakiś tekst jest rozdzielony, powinien to być osobny akapit.
Robo Robok,
1
@JohnHenckel Trochę mylące, ponieważ <p>tagi nie mogą zawierać <div>tagów, zobacz ten post
deseosuho
1
Czasami kod, który przekazaliśmy do sformatowania, nie jest czymś, nad czym mamy kontrolę. To w tych czasach zaczynasz mówić do siebie: „Nie mogę dodać tagów <p> ... może jeśli tylko zmienię wysokość znaków, które zamiast tego są używane jako przekładki.
Brian

Odpowiedzi:

275

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.

Duroth
źródło
31
To NIE działa w: IE7, Opera10, Chrome2. W przeglądarce Firefox tworzy podwójny rozmiar marginesu. Musisz sprecyzowaćmargin-top: 10px;
awe
8
Dodaj content:" "atrybut do tego stylu i działa dobrze w Chrome
anushr
8
To rozwiązanie działa w przeglądarce Firefox. W przypadku przeglądarek opartych na webkicie możesz dodać line-height. W końcu coś takiego br { display:block; margin-top:10px; line-height:22px; }.
Cthulhu
2
@awe: Lepszym rozwiązaniem byłoby margin:10px 0 0dla tych, którzy nie chcą go podwójnej wielkości.
Kayla,
1
Nie działa dla mnie ... Próbowałem też kodu @ awe margin-top: 10px;, wciąż nie działałem ....
Kardynał - Przywróć Monikę
67

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

  br {
        line-height: 150%;
     }
htmldrum
źródło
1
O ile wiem, nie IE7.
Serhiy,
30
Działa to w celu zwiększenia wysokości łamania linii, ale jej nie zmniejsza .
Pluto
2
@htmldrum Gdy nie masz szansy na zmianę HTML, a tylko CSS, działa to świetnie. Dziękuję Ci! Powinno to być kontynuowane i uważane za prawidłową odpowiedź. Myślę.
flaschbier
@Pluto: poniższa odpowiedź Nigela działa na mnie w celu zmniejszenia wysokości!
Anupam
2
Niestety, nie działa już w Chrome v.76. W przypadku Edge i IE musisz także dodać wyrównanie w pionie: do góry. Tutaj zamieściłem rozwiązanie: stackoverflow.com/a/29674365/562862
Dave Burton
48

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 */
}
Isaac Minogue
źródło
3
To. Jest to prawidłowe w stosunku do pytania, jak stwierdzono. Jest to również jedyna odpowiedź na stronie, która faktycznie zrobiła to, czego potrzebowałem.
Xodarap777,
Żadna z pozostałych odpowiedzi nie działała dla mnie, dopóki nie zmodyfikowałem treści. To jest poprawna odpowiedź, IMO.
Xandor,
39

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; }
Simon Smith
źródło
1
Musiałem dodać margines: 0px dla IE8
IvanH
34
To przerażające nadużycie tagów HTML, lepiej użyć <p></p>marginesów, a następnie zniszczyć<hr />
Serj Sagan
Ta sztuczka jest dobra, ale aby uzyskać dokładniejszy wynik, musisz użyć marginesu: 0 i granicy: 0.
MAChitgarha
25

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.

Michael Borgwardt
źródło
1
Wydaje się, że tak naprawdę nie ma mowy. Próbowałem nawet grać z: przed i po właściwości, ale ... :(
n1313
1
Wiem, że to jest bardzo stare, ale @Isaac Minogue ma na to słuszny sposób. Modyfikacja contentwłaściwości załatwia sprawę.
Xandor,
22

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

<div style="line-height:150%;">
    <br>
</div>
Nigel
źródło
Działa to świetnie, a także omija ograniczenie odpowiedzi @ htmldrum
Anupam
11

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

Yoda
źródło
4
Tak, jasne, ale nie tego chcę.
n1313
1
W jaki sposób różni się to od tego, czego chcesz? Zwiększy przestrzeń między liniami.
Jörg,
W moim tekście mam nieco ponad dziewięć bla. Wyobraź sobie kilka kilobajtów tekstu podzielonego na trzy bloki z trzema cyframi.
n1313
Jeśli zastosujesz wysokość linii do <br>znacznika, wówczas wymuszone podziały linii będą większe niż zawinięte podziały linii ...
peirix
1
Brzmi bardziej, jakbyś chciał trzy akapity zamiast używać <br/>
Chris Chilvers,
7

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 .

Filip Dupanović
źródło
Tak, miałem duże nadzieje na: przed {content}; też mnie zawiodło.
n1313
Gdzieś go wstrzyknij, powinno działać. Niestety, nie działa w IE6 / 7.
Filip Dupanović,
5

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.

Sam Lowry
źródło
5
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.

DeFliGra
źródło
Czy możesz bardziej szczegółowo określić, która część twojego css rozwiązała problem? Pomoże to innym zrozumieć odpowiedź.
Frank Bryce,
Działa dla mnie całkiem dobrze, dziękuję! Brakuje jednak jakiejś informacji.
Vinícius Moraes,
4

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!

keithphw
źródło
4

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!

robinwkurtz
źródło
pracował dla mnie do zarządzania wielkością pionową na poziomie pikseli w UIWebView na iOS.
Diwann
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!
robinwkurtz
4

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.

niels
źródło
To nie daje odpowiedzi na pytanie. Aby skrytykować lub poprosić autora o wyjaśnienie, zostaw komentarz pod jego postem - zawsze możesz komentować własne posty, a gdy będziesz mieć wystarczającą reputację , będziesz mógł komentować każdy post .
Glitch Desire
Nie krytyka i prośba. Próbuję powiedzieć, co się stanie, jeśli umieścisz znacznik hr wewnątrz znacznika ap, zgodnie z sugestią. A jako nowicjusz nie mam wystarczającej reputacji, aby skomentować odpowiedni post. Więc proszę o poradę, jak inaczej powinienem zrobić taki komentarz (który IMHO jest bardzo istotny w odniesieniu do pytania).
niels
4

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; 
}  
David Shaked
źródło
Tylko użycie vertical-alignwydaje się załatwić sprawę z brtagiem. Przetestowałem to na IE 11.
3

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

Dave Burton
źródło
2

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.

Filip Dupanović
źródło
1
Dziękuję za odpowiedź, ale oświadczyłem, że nie mogę teraz zmienić tego układu. Oczywiście zmienię to na coś zdrowszego, kiedy będzie to możliwe, ale teraz - przepraszam.
n1313
1

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

Clement Herreman
źródło
1

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.

Jonn
źródło
Po raz pierwszy słyszałem o tej nieruchomości. Czy możesz to wyjaśnić bardziej szczegółowo?
n1313
Poprawiono mnie. „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, np. Blockquote {margin-top: 20px} itp. Itd. Itd.
Jonn
1

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 ...

Aaron Davidson
źródło
1

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: "" }
T.Todua
źródło
głosowanie za wyświetleniem: brak. tak właśnie skończyłem!
Brian
1

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.

Drizien
źródło
1

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.

Daniel Siddall
źródło
To nie daje odpowiedzi na pytanie. Aby skrytykować lub poprosić autora o wyjaśnienie, zostaw komentarz pod jego postem - zawsze możesz komentować własne posty, a gdy będziesz mieć wystarczającą reputację , będziesz mógł komentować każdy post . - Z recenzji
JRodDynamite
Nie zgadzam się. Pytanie PO dotyczyło tego, jak ustawić wysokość złamania linii. Nie możesz, więc dostosowujesz wysokość linii, aby uzyskać pożądany efekt.
Daniel Siddall
1

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>
Damir Olejar
źródło
0
<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).

Liam
źródło
1
Więc po co to publikować, jeśli nie zamierzasz podawać przykładów? Cała idea witryny polega na tym, że ją omawiasz.
Paul
0

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>
Gene Bo
źródło
0

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

Josh Ginn
źródło
0

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;
}
JGallardo
źródło
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>
Jon Reedholm
źródło
0

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>
Miloud Eloumri
źródło
0

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

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

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

użytkownik7212232
źródło
Tak, zdefiniowałem „dużą” klasę zarówno dla <br>, jak i <p>. „<br class=big>” dodaje spację między wierszami, a „<p class = big>” dodaje spację przed akapitem: ‍‍‍‍‍‍ ‍‍ br.big {display: block; zadowolony:""; margines na górze: 0,5 em; wysokość linii: 190%; vertical-align: top;} ‍‍‍‍‍‍ ‍‍ p.big {margin-top: 1.5em} ‍‍‍‍‍‍ ‍‍ Problem z tagiem <p> polega na tym, że jest on niespójnie stylizowany przez programy pocztowe. Gdy w odpowiedziach na e-mail „cytowany” jest tekst wiadomości e-mail zawierającej podziały akapitów, odstępy między akapitami często zmieniają się drastycznie. Mam więc zwyczaj używać podwójnych podziałów linii (ctrl-enter w gmail), w e-mailach.
Dave Burton