The mobile side implements truncation of title text

Applicable scenarios

When

the screen resolution is 320x500, the module title effect is as follows: when the screen resolution is 480x500, the module title effect is as follows: that is, when the screen resolution is large, display more text, resolution hours display less text, and need to ensure that this part is always fully displayed.

Implementation MethodScenario One: DEMO from @ Shang Zhe

1. Add Overflow:hidden;text-overflow:ellipsis;white-space:nowrap for the entire container and caption text container ; Ensure that the content is displayed on a single line. The effect is as follows, we need to display the site logo is also omitted, then we then improve
2. Add display:inline-block;max-width:100% to the header text container and set the container to a maximum width of 100%, when we find that the site identity is squeezed below
3. Add Display:inline-block;margin-left:-6em for the site identity container ; By setting a negative margin let our site logo be displayed in the header row
4. Add Padding-right:6em;box-sizing:border-box for the title text container ; By setting the value of the Box-sizing property to Border-box, the position occupied by the Padding-right value is calculated in the header text container, note that the value of Padding-right is exactly the adjusted value of the site identity container margin-left. After the adjustment, the effect is as follows:

5. Finally, we adjust the vertical alignment of the title text container and the site identity container so that they align vertically

Scenario two: DEMO from @guopi

1. Add display:inline-block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:80% to the header container ;
2. Finally, let's adjust the alignment to align the content vertically in the entire container.

Scenario Three: DEMO from @snadn

1. Add display:inline-block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100% to the header container ; Vertical-align:top; Here we set the vertical center alignment in advance.
2. Add White-space:nowrap for the whole container ; Control the content into a single line display
3. Then add the margin-right:100px for the whole container ; Limit the title content to a certain width, so that the site logo is displayed.
4. In the above effect, it is found that the gray background is also limited to a certain width, so we put the setting of the background on the whole container , the final effect is as follows:

Scenario four: DEMO from @snadn

1. Add Display:inline-block to the header container ; White-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:calc (100%–100px);
2. Finally, let's adjust the alignment to align the content vertically in the entire container .

Summarize:

1. Scheme I and programme three are unified for the truncation effect at different resolutions
2. Scenario two at different resolutions, some differences, such as the resolution of a large number of truncated content, the resolution of the hour content will be truncated less
3. Scenario four on the mobile side of the compatibility is not very good use caution.

The mobile side implements truncation of title text