Testo a capo all'interno di un elemento div non funziona

Ho un elemento divTesto a capo all'interno di un elemento div non funziona

<div id="testResult" style="padding-left: 120px;">

Sto provando a stampare un testo con carattere di nuova riga '\n' all'interno dell'elemento div.

Ma nel mio testo della pagina html si ignora il carattere di nuova riga.

$("#testResult").html("Feature: Apply filter to image\n As an user\n I want to be able to apply a filter to my image\n So I can make it look better and match my card's stile\n\n @US2330 @done\n Scenario Outline: Apply filter to a picture # features/card_edit_filter.feature:33\n Given I am on \"Filters Editor\" screen  # features/step_definitions/common_steps.rb:1\n And I see my card with the original image # features/step_definitions/card_filter_steps.rb:21\n When I touch the \"<filter_name>\" filter  # features/step_definitions/card_filter_steps.rb:1\n Then I see the image with the filter applied # features/step_definitions/card_filter_steps.rb:26\n\n Examples: \n  | filter_name |\n  | Black & White |\n  | Sepia   |\n  | Vintage  |\n\n @US2330 @done\n Scenario: Restore image after applying filter # features/card_edit_filter.feature:47\n")

Voglio mostrare il testo come:

Feature: Apply filter to image 
    As an user 
    I want to be able to apply a filter to my image 
    So I can make it look better and match my card's stile 

    @US2330 @done 
    Scenario Outline: Apply filter to a picture # features/card_edit_filter.feature:33 
    Given I am on "Filters Editor" screen  # features/step_definitions/common_steps.rb:1 
    And I see my card with the original image # features/step_definitions/card_filter_steps.rb:21 
    When I touch the "<filter_name>" filter  # features/step_definitions/card_filter_steps.rb:1 
    Then I see the image with the filter applied # features/step_definitions/card_filter_steps.rb:26 

    Examples: 
     | filter_name |

fonte

2014-09-16 Psl

Aggiungere questo css:

#testResult 
{ 
    white-space:pre-wrap; 
}

Demo

fonte

2014-09-16 07:33:37

Per conservare a capo e gli spazi, è possibile utilizzare un elemento <pre>:

<pre id="testResult" style="padding-left: 120px;"></pre> 

$("#testResult").text("Feature: Apply filter to image\n...e:47\n");

noti anche l'uso di .text() piuttosto che .html(). Dovresti sempre usare .text() a meno che tu non abbia una ragione specifica per cui necessitare di .html().

fonte

2014-09-16 07:28:32 JLRishe

-1

in HTML <br> viene utilizzato per la nuova linea .. questo codice seguente darà il risultato desiderato:

$("#testResult").html("Feature: Apply filter to image<br> As an user<br> I want to be able to apply a filter to my image<br> So I can make it look better and match my card's stile<br><br> @US2330 @done<br> Scenario Outline: Apply filter to a picture # features/card_edit_filter.feature:33<br> Given I am on \"Filters Editor\" screen  # features/step_definitions/common_steps.rb:1<br> And I see my card with the original image # features/step_definitions/card_filter_steps.rb:21<br> When I touch the \"<filter_name>\" filter  # features/step_definitions/card_filter_steps.rb:1<br> Then I see the image with the filter applied # features/step_definitions/card_filter_steps.rb:26<br><br> Examples: <br>  | filter_name |<br>  | Black & White |<br>  | Sepia   |<br>  | Vintage  |<br><br> @US2330 @done<br> Scenario: Restore image after applying filter # features/card_edit_filter.feature:47<br>");

fonte

2014-09-16 07:29:01

di seguire questa strada, s/avrebbe anche dovuto sostituire tutti gli spazi con '' . – JLRishe

possibile utilizzare un tag <pre>

DEMO

fonte

2014-09-16 07:29:44 charlietfl

Si potrebbe prova un semplice approccio css forse?

#testResult { 
    white-space: pre-wrap; 
}

Ciò preserverà il \ n nell'output.

fonte

2014-09-16 07:33:17 Flobbo

Vale anche la pena notare che manterrà gli spazi nell'output, che è ciò che OP vuole. – JLRishe

E puoi usare \ t per le schede – Sami

Testo a capo all'interno di un elemento div non funziona

risposta

Problemi correlati