feat: Wrap label text in ion-select, ion-toggle and other input components

[tetsuwanadam]

Prerequisites

• I have read the Contributing Guidelines.
• I agree to follow the Code of Conduct.
• I have searched for existing issues that already include this feature request, without success.

Describe the Feature Request

With the v7 syntax for setting an ion-select label via the label property, or an ion-toggle label via its inner text, it appears impossible to make long label text wrap instead of being truncated.

The fix using the previous syntax would be:

<ion-item>
	<ion-label class="ion-text-wrap">Long ion-select label that will wrap</ion-label>
	<ion-select>
		<!-- Select options here -->
	</ion-select>
</ion-item>

<ion-item>
	<ion-label class="ion-text-wrap">Long ion-toggle label that will wrap</ion-label>
	<ion-toggle></ion-toggle>
</ion-item>

Describe the Use Case

Long label text in select, toggle and other input elements sometimes needs to wrap instead of being truncated.

Describe Preferred Solution

Potential solutions would include:

• Making the ion-text-wrap class apply to the ion-select or ion-toggle component's label
• Implementing a css custom property for wrapping the label text
• Exposing the label as a shadow part, as requested in issue 27112

Describe Alternatives

No response

Related Code

No response

Additional Information

No response

[liamdebeasi]

Thanks for the report. With the exception of one component, you can already get the label text to wrap:

1. ion-checkbox, ion-toggle, ion-radio, ion-range:

These components support passing in custom HTML as the label. This means you can use the ion-text-wrap class currently to make the text wrap.

Example:

<!-- the 300px width is just to emphasize the overflow. You don't need to use 300px for this to work -->
<ion-toggle style="width: 300px">
  <div class="ion-text-wrap">This is my really really really really really long text</div>
</ion-toggle>

2. ion-select:

Currently this is difficult to do. However, we have implemented both #27112 and #26838 which will make this much easier to do.

These features will be in the next minor release of Ionic.

Example usage once this feature ships:

<!-- the 300px width is just to emphasize the overflow. You don't need to use 300px for this to work -->
<!-- You can also use the shadow part -->
<ion-select style="width: 300px">
  <div slot="label" class="ion-text-wrap">This is my really really really really really long text</div>
</ion-select>

3. ion-input and ion-textarea:

You can set the text wrapping by using CSS since these components do not use the shadow DOM:

<ion-input
  class="my-input" 
  style="width: 300px" 
  label="This is my really really really really really long text"
></ion-input>

.my-input .label-text {
  white-space: normal;
}

However, I recognize this is an inconsistent developer experience. We plan to implement #27061 which will let you pass custom HTML as the label. Once this feature ships the behavior will be consistent.

Example usage once this feature ships:

<!-- the 300px width is just to emphasize the overflow. You don't need to use 300px for this to work -->
<!-- Note: The previous approach still works too -->
<ion-input style="width: 300px">
  <div slot="label" class="ion-text-wrap">This is my really really really really really long text</div>
</ion-input>

---

I am going to close this in favor of #27061 since that is the outstanding feature required to make this behavior consistent. Let me know if you have questions.

[liamdebeasi]

Also we've gotten this question a couple times so I think it makes sense to add some playgrounds on our docs that show how to do this.

[ionitron-bot]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.