Why do I Use white-space pre-wrap and word-space not working on the first space to set up the width of space

I use white-space: pre-wrap for space at the beginning of tag.
And use word-spacing:1em to setup the space width.

But there is a problem that the space at the beginning of the tag is not 1em width, and other spaces are all right except it.

the code:

p{

    white-space: pre-wrap;

    word-spacing:1em;

 }

<p> This is a paragraph.</p>

<p>  This is a paragraph.</p>

My problem is how to change the width of space at the beginning of tag.

edited Jan 1 at 15:29

Temani Afif

77.8k94490

asked Jan 1 at 15:21

Kevin Chen

262

add a comment |

I use white-space: pre-wrap for space at the beginning of tag.
And use word-spacing:1em to setup the space width.

But there is a problem that the space at the beginning of the tag is not 1em width, and other spaces are all right except it.

the code:

p{

    white-space: pre-wrap;

    word-spacing:1em;

 }

<p> This is a paragraph.</p>

<p>  This is a paragraph.</p>

My problem is how to change the width of space at the beginning of tag.

edited Jan 1 at 15:29

Temani Afif

77.8k94490

asked Jan 1 at 15:21

Kevin Chen

262

add a comment |

I use white-space: pre-wrap for space at the beginning of tag.
And use word-spacing:1em to setup the space width.

But there is a problem that the space at the beginning of the tag is not 1em width, and other spaces are all right except it.

the code:

p{

    white-space: pre-wrap;

    word-spacing:1em;

 }

<p> This is a paragraph.</p>

<p>  This is a paragraph.</p>

My problem is how to change the width of space at the beginning of tag.

edited Jan 1 at 15:29

Temani Afif

77.8k94490

asked Jan 1 at 15:21

Kevin Chen

262

I use white-space: pre-wrap for space at the beginning of tag.
And use word-spacing:1em to setup the space width.

But there is a problem that the space at the beginning of the tag is not 1em width, and other spaces are all right except it.

the code:

p{

    white-space: pre-wrap;

    word-spacing:1em;

 }

<p> This is a paragraph.</p>

<p>  This is a paragraph.</p>

My problem is how to change the width of space at the beginning of tag.

p{

    white-space: pre-wrap;

    word-spacing:1em;

 }

<p> This is a paragraph.</p>

<p>  This is a paragraph.</p>

p{

    white-space: pre-wrap;

    word-spacing:1em;

 }

<p> This is a paragraph.</p>

<p>  This is a paragraph.</p>

html css

edited Jan 1 at 15:29

Temani Afif

77.8k94490

asked Jan 1 at 15:21

Kevin Chen

262

edited Jan 1 at 15:29

Temani Afif

77.8k94490

asked Jan 1 at 15:21

Kevin Chen

262

edited Jan 1 at 15:29

Temani Afif

77.8k94490

edited Jan 1 at 15:29

Temani Afif

77.8k94490

edited Jan 1 at 15:29

Temani Afif

77.8k94490

asked Jan 1 at 15:21

Kevin Chen

262

asked Jan 1 at 15:21

Kevin Chen

262

asked Jan 1 at 15:21

Kevin Chen

262

add a comment |

2 Answers
2

active

oldest

votes

The word-spacing property will only affect the space between two words, so i would add this:

p 

{

   padding-left: 1em;

}

answered Jan 1 at 15:32

beelze

514

oh, finally i know why the space width is not right. But the padding affect whole word in tag, i just wanna indent paragraphs(one or more) in a tag like a article. Because the data is from user input and could be changed.

– Kevin Chen
Jan 3 at 10:44

add a comment |

You can also use the text-indent. The text-indent CSS property sets the length of empty space (indentation) that is put before lines of text in a block.

p { white-space: pre-wrap; word-spacing: 1em; border: 1px solid; text-indent: 1em}

Read more here: https://developer.mozilla.org/en-US/docs/Web/CSS/text-indent

answered Jan 1 at 15:53

A. Meshu

9072718

thanks, but i wanna change space because there will more paragraph in a tag. Need more indent not only beginning.

– Kevin Chen
Jan 3 at 10:38

add a comment |

Your Answer

StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});

}
});

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53996613%2fwhy-do-i-use-white-space-pre-wrap-and-word-space-not-working-on-the-first-space%23new-answer', 'question_page');
}
);

Post as a guest

Name

Required, but never shown

2 Answers
2

active

oldest

votes

2 Answers
2

active

oldest

votes

The word-spacing property will only affect the space between two words, so i would add this:

p 

{

   padding-left: 1em;

}

answered Jan 1 at 15:32

beelze

514

oh, finally i know why the space width is not right. But the padding affect whole word in tag, i just wanna indent paragraphs(one or more) in a tag like a article. Because the data is from user input and could be changed.

– Kevin Chen
Jan 3 at 10:44

add a comment |

The word-spacing property will only affect the space between two words, so i would add this:

p 

{

   padding-left: 1em;

}

answered Jan 1 at 15:32

beelze

514

oh, finally i know why the space width is not right. But the padding affect whole word in tag, i just wanna indent paragraphs(one or more) in a tag like a article. Because the data is from user input and could be changed.

– Kevin Chen
Jan 3 at 10:44

add a comment |

The word-spacing property will only affect the space between two words, so i would add this:

p 

{

   padding-left: 1em;

}

answered Jan 1 at 15:32

beelze

514

The word-spacing property will only affect the space between two words, so i would add this:

p 

{

   padding-left: 1em;

}

answered Jan 1 at 15:32

beelze

514

answered Jan 1 at 15:32

beelze

514

answered Jan 1 at 15:32

beelze

514

answered Jan 1 at 15:32

beelze

514

oh, finally i know why the space width is not right. But the padding affect whole word in tag, i just wanna indent paragraphs(one or more) in a tag like a article. Because the data is from user input and could be changed.

– Kevin Chen
Jan 3 at 10:44

add a comment |

oh, finally i know why the space width is not right. But the padding affect whole word in tag, i just wanna indent paragraphs(one or more) in a tag like a article. Because the data is from user input and could be changed.

– Kevin Chen
Jan 3 at 10:44

oh, finally i know why the space width is not right. But the padding affect whole word in tag, i just wanna indent paragraphs(one or more) in a tag like a article. Because the data is from user input and could be changed.

– Kevin Chen
Jan 3 at 10:44

add a comment |

You can also use the text-indent. The text-indent CSS property sets the length of empty space (indentation) that is put before lines of text in a block.

p { white-space: pre-wrap; word-spacing: 1em; border: 1px solid; text-indent: 1em}

Read more here: https://developer.mozilla.org/en-US/docs/Web/CSS/text-indent

answered Jan 1 at 15:53

A. Meshu

9072718

thanks, but i wanna change space because there will more paragraph in a tag. Need more indent not only beginning.

– Kevin Chen
Jan 3 at 10:38

add a comment |

You can also use the text-indent. The text-indent CSS property sets the length of empty space (indentation) that is put before lines of text in a block.

p { white-space: pre-wrap; word-spacing: 1em; border: 1px solid; text-indent: 1em}

Read more here: https://developer.mozilla.org/en-US/docs/Web/CSS/text-indent

answered Jan 1 at 15:53

A. Meshu

9072718

thanks, but i wanna change space because there will more paragraph in a tag. Need more indent not only beginning.

– Kevin Chen
Jan 3 at 10:38

add a comment |

You can also use the text-indent. The text-indent CSS property sets the length of empty space (indentation) that is put before lines of text in a block.

p { white-space: pre-wrap; word-spacing: 1em; border: 1px solid; text-indent: 1em}

Read more here: https://developer.mozilla.org/en-US/docs/Web/CSS/text-indent

answered Jan 1 at 15:53

A. Meshu

9072718

You can also use the text-indent. The text-indent CSS property sets the length of empty space (indentation) that is put before lines of text in a block.

p { white-space: pre-wrap; word-spacing: 1em; border: 1px solid; text-indent: 1em}

Read more here: https://developer.mozilla.org/en-US/docs/Web/CSS/text-indent

answered Jan 1 at 15:53

A. Meshu

9072718

answered Jan 1 at 15:53

A. Meshu

9072718

answered Jan 1 at 15:53

A. Meshu

9072718

answered Jan 1 at 15:53

A. Meshu

9072718

thanks, but i wanna change space because there will more paragraph in a tag. Need more indent not only beginning.

– Kevin Chen
Jan 3 at 10:38

add a comment |

thanks, but i wanna change space because there will more paragraph in a tag. Need more indent not only beginning.

– Kevin Chen
Jan 3 at 10:38

thanks, but i wanna change space because there will more paragraph in a tag. Need more indent not only beginning.

– Kevin Chen
Jan 3 at 10:38

add a comment |

draft saved

draft discarded

Thanks for contributing an answer to Stack Overflow!

Please be sure to answer the question. Provide details and share your research!

But avoid …

Asking for help, clarification, or responding to other answers.

Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

Search This Blog

Ufyukyu