UILabel Text Not Wrapping
I am working on a Swift project with Storyboards where I want text to wrap in a label. In the old Objective-C version where I did not use a Storyboard I used the following settings and things worked perfectly.

Here are the settings for Swift

I have been reading about the potential auto layout issues with preferred width settings. I currently have them set to auto layout and the label itself is set to a width of 560. I've added a constraint to keep the label 20 pixels from the trailing superview and while I thought this would work I still cannot get the text to wrap. The dimension settings are below.

Can someone explain how to get the text to wrap?
swift storyboard autolayout uilabel
add a comment |
I am working on a Swift project with Storyboards where I want text to wrap in a label. In the old Objective-C version where I did not use a Storyboard I used the following settings and things worked perfectly.

Here are the settings for Swift

I have been reading about the potential auto layout issues with preferred width settings. I currently have them set to auto layout and the label itself is set to a width of 560. I've added a constraint to keep the label 20 pixels from the trailing superview and while I thought this would work I still cannot get the text to wrap. The dimension settings are below.

Can someone explain how to get the text to wrap?
swift storyboard autolayout uilabel
My mistake on the terminology. I meant to say Storyboards not Playgrounds.
– jonthornham
May 26 '15 at 2:37
That's an improvement, but please note also that this has nothing to do with Swift or Objective-C. You should remove all reference to language from your question. If you previously didn't use a storyboard, then the contrast would be between code and storyboard, or between .xib file and storyboard.
– matt
May 26 '15 at 2:52
add a comment |
I am working on a Swift project with Storyboards where I want text to wrap in a label. In the old Objective-C version where I did not use a Storyboard I used the following settings and things worked perfectly.

Here are the settings for Swift

I have been reading about the potential auto layout issues with preferred width settings. I currently have them set to auto layout and the label itself is set to a width of 560. I've added a constraint to keep the label 20 pixels from the trailing superview and while I thought this would work I still cannot get the text to wrap. The dimension settings are below.

Can someone explain how to get the text to wrap?
swift storyboard autolayout uilabel
I am working on a Swift project with Storyboards where I want text to wrap in a label. In the old Objective-C version where I did not use a Storyboard I used the following settings and things worked perfectly.

Here are the settings for Swift

I have been reading about the potential auto layout issues with preferred width settings. I currently have them set to auto layout and the label itself is set to a width of 560. I've added a constraint to keep the label 20 pixels from the trailing superview and while I thought this would work I still cannot get the text to wrap. The dimension settings are below.

Can someone explain how to get the text to wrap?
swift storyboard autolayout uilabel
swift storyboard autolayout uilabel
edited May 26 '15 at 2:36
jonthornham
asked May 25 '15 at 22:56
jonthornhamjonthornham
8021915
8021915
My mistake on the terminology. I meant to say Storyboards not Playgrounds.
– jonthornham
May 26 '15 at 2:37
That's an improvement, but please note also that this has nothing to do with Swift or Objective-C. You should remove all reference to language from your question. If you previously didn't use a storyboard, then the contrast would be between code and storyboard, or between .xib file and storyboard.
– matt
May 26 '15 at 2:52
add a comment |
My mistake on the terminology. I meant to say Storyboards not Playgrounds.
– jonthornham
May 26 '15 at 2:37
That's an improvement, but please note also that this has nothing to do with Swift or Objective-C. You should remove all reference to language from your question. If you previously didn't use a storyboard, then the contrast would be between code and storyboard, or between .xib file and storyboard.
– matt
May 26 '15 at 2:52
My mistake on the terminology. I meant to say Storyboards not Playgrounds.
– jonthornham
May 26 '15 at 2:37
My mistake on the terminology. I meant to say Storyboards not Playgrounds.
– jonthornham
May 26 '15 at 2:37
That's an improvement, but please note also that this has nothing to do with Swift or Objective-C. You should remove all reference to language from your question. If you previously didn't use a storyboard, then the contrast would be between code and storyboard, or between .xib file and storyboard.
– matt
May 26 '15 at 2:52
That's an improvement, but please note also that this has nothing to do with Swift or Objective-C. You should remove all reference to language from your question. If you previously didn't use a storyboard, then the contrast would be between code and storyboard, or between .xib file and storyboard.
– matt
May 26 '15 at 2:52
add a comment |
6 Answers
6
active
oldest
votes
First, the good news: You have set the label to 2 lines and Word Wrap. So it can wrap. Excellent.
Now you must make sure the label is tall enough. Either give it no height constraint, or give it a big enough height constraint that it can accommodate two lines.
Finally, you must limit its width. This is what causes the text to wrap. If you don't limit the label's width, it will just keep growing rightward, potentially continuing off the screen. The limit on the label's width stops this rightward growth and causes the text to wrap (and the label to grow downward instead).
You can limit width in several ways. You can have an actual width constraints. Or you can have a leading constraint and a trailing constraint, to something relatively immovable, such as the superview. And there is a third way: on the Size inspector (which you do also show, at the bottom right of your question), set the Preferred Width (it is shown at the top of the Size inspector): this is the width at which, all other things being equal, the label will stop growing to the right and wrap and grow down instead.
1
"Either give it no height constraint" - That was it for me!
– Siddhartha
Dec 31 '15 at 23:11
"Finally, you must limit its width" this worked for me. My xib had broken width constraint that it was keep setting line number to 1.
– green0range
May 10 '17 at 20:21
add a comment |
Declare your UILabel programmatically and give
yourUILabel.contentMode = .scaleToFill
yourUILabel.numberOfLines = 0
yourUILabel.leadingMargin(pixel: 10)
yourUILabel.trailingMargin(pixel: 10)
This worked for me.
add a comment |
Your text will wrap if you have provided lines number more than 1. However you may not be able to see it wrap if the label height is not enough to show the content. I suggest you to remove the height constraint or increase its value.
I tried this and I had no luck. Regardless, thanks for the input.
– jonthornham
May 26 '15 at 16:51
add a comment |
What fixed this problem was changing the label type to "Placeholder" under Intrinsic Size in IB. When I changed this the text wrapped and the warnings went away.
2
"Setting a design time intrinsic content size only affects a view while editing in Interface Builder. The view will not have this intrinsic content size at runtime."
– static0886
Jan 18 '16 at 15:34
@static0886 did you try this answer and find that it failed? This would be far from the strangest thing I've seen Interface Builder do that's contrary to the documentation.
– nolanw
Oct 2 '17 at 17:03
add a comment |
In case this helps anybody: I had followed the advice given here to fix my label not wrapping to two lines but nothing worked. What worked for me was I first deleted some of the relevant constraints in storyboard (I'm using auto layout) and saw that the label wrapped properly. I slowly added back the constraints I needed and everything still seems to work fine. So deleting and remaking your constraints may help.
add a comment |
As I see you interface builder. There are two problems. First one is with your constraints, and another one is with the property.
You gave it a fixed height which is wrong while line wrap. You need to make the auto-resizing label, i.e. remove height and add the bottom constraint or simple remove height depend on your situation. Your text is moving to the next line, but due to fixed constraint, you can't see it.
You enable the option to clip subviews which is wrong as it cuts your view and you are unable to view wrap word.
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
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f30447034%2fuilabel-text-not-wrapping%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
6 Answers
6
active
oldest
votes
6 Answers
6
active
oldest
votes
active
oldest
votes
active
oldest
votes
First, the good news: You have set the label to 2 lines and Word Wrap. So it can wrap. Excellent.
Now you must make sure the label is tall enough. Either give it no height constraint, or give it a big enough height constraint that it can accommodate two lines.
Finally, you must limit its width. This is what causes the text to wrap. If you don't limit the label's width, it will just keep growing rightward, potentially continuing off the screen. The limit on the label's width stops this rightward growth and causes the text to wrap (and the label to grow downward instead).
You can limit width in several ways. You can have an actual width constraints. Or you can have a leading constraint and a trailing constraint, to something relatively immovable, such as the superview. And there is a third way: on the Size inspector (which you do also show, at the bottom right of your question), set the Preferred Width (it is shown at the top of the Size inspector): this is the width at which, all other things being equal, the label will stop growing to the right and wrap and grow down instead.
1
"Either give it no height constraint" - That was it for me!
– Siddhartha
Dec 31 '15 at 23:11
"Finally, you must limit its width" this worked for me. My xib had broken width constraint that it was keep setting line number to 1.
– green0range
May 10 '17 at 20:21
add a comment |
First, the good news: You have set the label to 2 lines and Word Wrap. So it can wrap. Excellent.
Now you must make sure the label is tall enough. Either give it no height constraint, or give it a big enough height constraint that it can accommodate two lines.
Finally, you must limit its width. This is what causes the text to wrap. If you don't limit the label's width, it will just keep growing rightward, potentially continuing off the screen. The limit on the label's width stops this rightward growth and causes the text to wrap (and the label to grow downward instead).
You can limit width in several ways. You can have an actual width constraints. Or you can have a leading constraint and a trailing constraint, to something relatively immovable, such as the superview. And there is a third way: on the Size inspector (which you do also show, at the bottom right of your question), set the Preferred Width (it is shown at the top of the Size inspector): this is the width at which, all other things being equal, the label will stop growing to the right and wrap and grow down instead.
1
"Either give it no height constraint" - That was it for me!
– Siddhartha
Dec 31 '15 at 23:11
"Finally, you must limit its width" this worked for me. My xib had broken width constraint that it was keep setting line number to 1.
– green0range
May 10 '17 at 20:21
add a comment |
First, the good news: You have set the label to 2 lines and Word Wrap. So it can wrap. Excellent.
Now you must make sure the label is tall enough. Either give it no height constraint, or give it a big enough height constraint that it can accommodate two lines.
Finally, you must limit its width. This is what causes the text to wrap. If you don't limit the label's width, it will just keep growing rightward, potentially continuing off the screen. The limit on the label's width stops this rightward growth and causes the text to wrap (and the label to grow downward instead).
You can limit width in several ways. You can have an actual width constraints. Or you can have a leading constraint and a trailing constraint, to something relatively immovable, such as the superview. And there is a third way: on the Size inspector (which you do also show, at the bottom right of your question), set the Preferred Width (it is shown at the top of the Size inspector): this is the width at which, all other things being equal, the label will stop growing to the right and wrap and grow down instead.
First, the good news: You have set the label to 2 lines and Word Wrap. So it can wrap. Excellent.
Now you must make sure the label is tall enough. Either give it no height constraint, or give it a big enough height constraint that it can accommodate two lines.
Finally, you must limit its width. This is what causes the text to wrap. If you don't limit the label's width, it will just keep growing rightward, potentially continuing off the screen. The limit on the label's width stops this rightward growth and causes the text to wrap (and the label to grow downward instead).
You can limit width in several ways. You can have an actual width constraints. Or you can have a leading constraint and a trailing constraint, to something relatively immovable, such as the superview. And there is a third way: on the Size inspector (which you do also show, at the bottom right of your question), set the Preferred Width (it is shown at the top of the Size inspector): this is the width at which, all other things being equal, the label will stop growing to the right and wrap and grow down instead.
answered May 26 '15 at 2:50
mattmatt
325k46525725
325k46525725
1
"Either give it no height constraint" - That was it for me!
– Siddhartha
Dec 31 '15 at 23:11
"Finally, you must limit its width" this worked for me. My xib had broken width constraint that it was keep setting line number to 1.
– green0range
May 10 '17 at 20:21
add a comment |
1
"Either give it no height constraint" - That was it for me!
– Siddhartha
Dec 31 '15 at 23:11
"Finally, you must limit its width" this worked for me. My xib had broken width constraint that it was keep setting line number to 1.
– green0range
May 10 '17 at 20:21
1
1
"Either give it no height constraint" - That was it for me!
– Siddhartha
Dec 31 '15 at 23:11
"Either give it no height constraint" - That was it for me!
– Siddhartha
Dec 31 '15 at 23:11
"Finally, you must limit its width" this worked for me. My xib had broken width constraint that it was keep setting line number to 1.
– green0range
May 10 '17 at 20:21
"Finally, you must limit its width" this worked for me. My xib had broken width constraint that it was keep setting line number to 1.
– green0range
May 10 '17 at 20:21
add a comment |
Declare your UILabel programmatically and give
yourUILabel.contentMode = .scaleToFill
yourUILabel.numberOfLines = 0
yourUILabel.leadingMargin(pixel: 10)
yourUILabel.trailingMargin(pixel: 10)
This worked for me.
add a comment |
Declare your UILabel programmatically and give
yourUILabel.contentMode = .scaleToFill
yourUILabel.numberOfLines = 0
yourUILabel.leadingMargin(pixel: 10)
yourUILabel.trailingMargin(pixel: 10)
This worked for me.
add a comment |
Declare your UILabel programmatically and give
yourUILabel.contentMode = .scaleToFill
yourUILabel.numberOfLines = 0
yourUILabel.leadingMargin(pixel: 10)
yourUILabel.trailingMargin(pixel: 10)
This worked for me.
Declare your UILabel programmatically and give
yourUILabel.contentMode = .scaleToFill
yourUILabel.numberOfLines = 0
yourUILabel.leadingMargin(pixel: 10)
yourUILabel.trailingMargin(pixel: 10)
This worked for me.
edited Nov 13 '18 at 10:02
answered Dec 28 '17 at 7:53
Vignesh rajaVignesh raja
7114
7114
add a comment |
add a comment |
Your text will wrap if you have provided lines number more than 1. However you may not be able to see it wrap if the label height is not enough to show the content. I suggest you to remove the height constraint or increase its value.
I tried this and I had no luck. Regardless, thanks for the input.
– jonthornham
May 26 '15 at 16:51
add a comment |
Your text will wrap if you have provided lines number more than 1. However you may not be able to see it wrap if the label height is not enough to show the content. I suggest you to remove the height constraint or increase its value.
I tried this and I had no luck. Regardless, thanks for the input.
– jonthornham
May 26 '15 at 16:51
add a comment |
Your text will wrap if you have provided lines number more than 1. However you may not be able to see it wrap if the label height is not enough to show the content. I suggest you to remove the height constraint or increase its value.
Your text will wrap if you have provided lines number more than 1. However you may not be able to see it wrap if the label height is not enough to show the content. I suggest you to remove the height constraint or increase its value.
edited Jul 6 '16 at 15:38
Forge
4,18453045
4,18453045
answered May 26 '15 at 7:44
Aman JainAman Jain
83128
83128
I tried this and I had no luck. Regardless, thanks for the input.
– jonthornham
May 26 '15 at 16:51
add a comment |
I tried this and I had no luck. Regardless, thanks for the input.
– jonthornham
May 26 '15 at 16:51
I tried this and I had no luck. Regardless, thanks for the input.
– jonthornham
May 26 '15 at 16:51
I tried this and I had no luck. Regardless, thanks for the input.
– jonthornham
May 26 '15 at 16:51
add a comment |
What fixed this problem was changing the label type to "Placeholder" under Intrinsic Size in IB. When I changed this the text wrapped and the warnings went away.
2
"Setting a design time intrinsic content size only affects a view while editing in Interface Builder. The view will not have this intrinsic content size at runtime."
– static0886
Jan 18 '16 at 15:34
@static0886 did you try this answer and find that it failed? This would be far from the strangest thing I've seen Interface Builder do that's contrary to the documentation.
– nolanw
Oct 2 '17 at 17:03
add a comment |
What fixed this problem was changing the label type to "Placeholder" under Intrinsic Size in IB. When I changed this the text wrapped and the warnings went away.
2
"Setting a design time intrinsic content size only affects a view while editing in Interface Builder. The view will not have this intrinsic content size at runtime."
– static0886
Jan 18 '16 at 15:34
@static0886 did you try this answer and find that it failed? This would be far from the strangest thing I've seen Interface Builder do that's contrary to the documentation.
– nolanw
Oct 2 '17 at 17:03
add a comment |
What fixed this problem was changing the label type to "Placeholder" under Intrinsic Size in IB. When I changed this the text wrapped and the warnings went away.
What fixed this problem was changing the label type to "Placeholder" under Intrinsic Size in IB. When I changed this the text wrapped and the warnings went away.
edited Jan 14 '17 at 13:16
Forge
4,18453045
4,18453045
answered Jun 1 '15 at 19:13
jonthornhamjonthornham
8021915
8021915
2
"Setting a design time intrinsic content size only affects a view while editing in Interface Builder. The view will not have this intrinsic content size at runtime."
– static0886
Jan 18 '16 at 15:34
@static0886 did you try this answer and find that it failed? This would be far from the strangest thing I've seen Interface Builder do that's contrary to the documentation.
– nolanw
Oct 2 '17 at 17:03
add a comment |
2
"Setting a design time intrinsic content size only affects a view while editing in Interface Builder. The view will not have this intrinsic content size at runtime."
– static0886
Jan 18 '16 at 15:34
@static0886 did you try this answer and find that it failed? This would be far from the strangest thing I've seen Interface Builder do that's contrary to the documentation.
– nolanw
Oct 2 '17 at 17:03
2
2
"Setting a design time intrinsic content size only affects a view while editing in Interface Builder. The view will not have this intrinsic content size at runtime."
– static0886
Jan 18 '16 at 15:34
"Setting a design time intrinsic content size only affects a view while editing in Interface Builder. The view will not have this intrinsic content size at runtime."
– static0886
Jan 18 '16 at 15:34
@static0886 did you try this answer and find that it failed? This would be far from the strangest thing I've seen Interface Builder do that's contrary to the documentation.
– nolanw
Oct 2 '17 at 17:03
@static0886 did you try this answer and find that it failed? This would be far from the strangest thing I've seen Interface Builder do that's contrary to the documentation.
– nolanw
Oct 2 '17 at 17:03
add a comment |
In case this helps anybody: I had followed the advice given here to fix my label not wrapping to two lines but nothing worked. What worked for me was I first deleted some of the relevant constraints in storyboard (I'm using auto layout) and saw that the label wrapped properly. I slowly added back the constraints I needed and everything still seems to work fine. So deleting and remaking your constraints may help.
add a comment |
In case this helps anybody: I had followed the advice given here to fix my label not wrapping to two lines but nothing worked. What worked for me was I first deleted some of the relevant constraints in storyboard (I'm using auto layout) and saw that the label wrapped properly. I slowly added back the constraints I needed and everything still seems to work fine. So deleting and remaking your constraints may help.
add a comment |
In case this helps anybody: I had followed the advice given here to fix my label not wrapping to two lines but nothing worked. What worked for me was I first deleted some of the relevant constraints in storyboard (I'm using auto layout) and saw that the label wrapped properly. I slowly added back the constraints I needed and everything still seems to work fine. So deleting and remaking your constraints may help.
In case this helps anybody: I had followed the advice given here to fix my label not wrapping to two lines but nothing worked. What worked for me was I first deleted some of the relevant constraints in storyboard (I'm using auto layout) and saw that the label wrapped properly. I slowly added back the constraints I needed and everything still seems to work fine. So deleting and remaking your constraints may help.
answered Oct 15 '17 at 8:56
Ed ManningEd Manning
84
84
add a comment |
add a comment |
As I see you interface builder. There are two problems. First one is with your constraints, and another one is with the property.
You gave it a fixed height which is wrong while line wrap. You need to make the auto-resizing label, i.e. remove height and add the bottom constraint or simple remove height depend on your situation. Your text is moving to the next line, but due to fixed constraint, you can't see it.
You enable the option to clip subviews which is wrong as it cuts your view and you are unable to view wrap word.
add a comment |
As I see you interface builder. There are two problems. First one is with your constraints, and another one is with the property.
You gave it a fixed height which is wrong while line wrap. You need to make the auto-resizing label, i.e. remove height and add the bottom constraint or simple remove height depend on your situation. Your text is moving to the next line, but due to fixed constraint, you can't see it.
You enable the option to clip subviews which is wrong as it cuts your view and you are unable to view wrap word.
add a comment |
As I see you interface builder. There are two problems. First one is with your constraints, and another one is with the property.
You gave it a fixed height which is wrong while line wrap. You need to make the auto-resizing label, i.e. remove height and add the bottom constraint or simple remove height depend on your situation. Your text is moving to the next line, but due to fixed constraint, you can't see it.
You enable the option to clip subviews which is wrong as it cuts your view and you are unable to view wrap word.
As I see you interface builder. There are two problems. First one is with your constraints, and another one is with the property.
You gave it a fixed height which is wrong while line wrap. You need to make the auto-resizing label, i.e. remove height and add the bottom constraint or simple remove height depend on your situation. Your text is moving to the next line, but due to fixed constraint, you can't see it.
You enable the option to clip subviews which is wrong as it cuts your view and you are unable to view wrap word.
edited Nov 1 '18 at 12:51
answered Nov 1 '18 at 12:42
Rehan AliRehan Ali
11114
11114
add a comment |
add a comment |
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.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f30447034%2fuilabel-text-not-wrapping%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
My mistake on the terminology. I meant to say Storyboards not Playgrounds.
– jonthornham
May 26 '15 at 2:37
That's an improvement, but please note also that this has nothing to do with Swift or Objective-C. You should remove all reference to language from your question. If you previously didn't use a storyboard, then the contrast would be between code and storyboard, or between .xib file and storyboard.
– matt
May 26 '15 at 2:52