Media text

[chiriqui]

When I add text to a media entry sometimes the text if it is particularly long gets cut out of the page when it is displayed. The work around has been to break up the lines of text with more line breaks.

Is there some setting that would re-adjust the line feeds to take care of this problem?

[Timbalu]

Hi

Find the last occurance of .serendipity_imageComment_txt and add some of these

Code: Select all

.serendipity_imageComment_txt {
    /* overflow-x: auto;*/ /* Use horizontal scroller, if needed */
    overflow: none;  /* disable, if you want scrollbars happen */
    width: 95%; /* to adjust the length */
    white-space: pre;           /* CSS 2.0 */
    white-space: pre-wrap;      /* CSS 2.1 */
    white-space: pre-line;      /* CSS 3.0 */
    white-space: -pre-wrap;     /* Opera 4-6 */
    white-space: -o-pre-wrap;   /* Opera 7 */
    white-space: -moz-pre-wrap; /* Mozilla */
    white-space: -hp-pre-wrap;  /* HP Printers */
    word-wrap: break-word;      /* IE 5+ */
}

or add this block at the end of your stylesheet.

[yellowled]

Find the last occurance of .serendipity_imageComment_txt and add some of these

Yikes. Those usually only make sense for preformatted text, i.e. the pre element. All they do is control the handling of white space (hence the name of the CSS property).

The real issue here is that HTML and CSS don't have a working, usable solution for (automagic) hyphenation. There is the ­ entity, but that has to be added to the markup manually. The future solution will be something like p { hyphens: auto; } in CSS3, but as of now, that only works in latest Webkit and Gecko browsers with vendor prefixes. Moreover, it has rather poor language support (currently English only).

YL

[Timbalu]

Yes, true! You only need to add

Code: Select all

 width: 96%;

The whitespace would not have any effects here regarding the main problem, but sometimes they are useful. And I just had them to hand..., but that is why I said: "...add some of these".
Since CSS 2.1, whitespace is allowed for all (inline) elements.
http://www.w3.org/TR/CSS2/text.html#white-space-model

[yellowled]

You only need to add

Code: Select all

 width: 96%;

Even that will only work unless visitors use [ctrgl]+[+], depending on the layout and browser they use. The only true solution will be CSS hypenation.

YL