Chapter 4: Styling with CSS
87
Handling Overflowed Text with text-overflow
Because the width of the viewport in Mobile Safari is either 320 (portrait) or 480 (landscape) pixels,
effectively managing the physical length of dynamic text on UI elements can be tricky. This is
particularly important for headings or button text in which a fixed amount of real estate is available.
The best example of the need to handle text overflow is in the top toolbar that is a standard part of
iPhone application interface. By default, any content that does not fit inside of the container box of the
element is clipped, which can potentially lead to confusion, such as the example shown in Figure 4-4 .
Therefore, to prevent this situation from happening, you will want to provide a visual hint that the text
has been clipped. Fortunately, the text-overflow property enables developers to specify what they
wish to have done when the text runs on. The two values are ellipsis and clip . The ellipsis value
trims the content and adds an ellipsis character (. . .) to the end. Suppose you assign the following
property to the toolbar??™s button and heading element:
text-overflow: ellipsis;
Figure 4-4: Text is clipped if it does not fit into available
space.
Pages:
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113