html
  • image
  • word-wrap
  • textwrapping
  • 2013-01-03 3 views 2 likes 
    2

    텍스트를 이미지 주위에 감싸 야합니다.이 텍스트에는 매우 긴 단어 (약 이름)가 포함될 수 있습니다. 나는 명백한 일을하고 있으며 다른 것들도 거의 시도하지 않고 있지만 이것은 현재 코드가 어떻게 보이는지를 보여줍니다.html 둘러보기 다음 단어 둘러보기

    <div style='width:120px;'> 
        <img scr="myImage.png" style='float:right;width:50px;'> 
        <p style='word-wrap:break-word;'>This_is_the_very_long_word_without_hyphens_I_need_to_wrap_.</p> 
        <p>This is a normal paragraph of text that needs to flow around the image if there is space available. Leaving the option of tables out of question and specially because the height of the image may vary and don't want a huge white space between the paragraphs.</p> 
    <div> 
    

    그래서 단어는 아마 (. 난 당신이 P-태그에 테 IMG 태그를 삽입해야합니다 생각합니다. 사업부에 있지만 이미지 :(에서 매우 큰되지

    답변

    1

    word-wrap: break-word 대신 문자 그대로는 hyphens: auto을 사용하고 브라우저 접두어가 붙은 버전과 JavaScript 기반의 하이픈을 사용하여 백업하십시오. (수정 된 마크 업과 함께) :

    <!doctype html> 
    <html lang=en> 
    <script src= 
    "http://hyphenator.googlecode.com/svn/tags/Version%204.1.0/Hyphenator.js"> 
    </script> 
    <script type="text/javascript"> 
    Hyphenator.config({useCSS3hyphenation: true}); 
    Hyphenator.run(); 
    </script> 
    <style> 
    .hyphenate { -moz-hyphens: auto; -ms-hyphens: auto; hyphens: auto; } 
    </style> 
    <div style='width:120px;'> 
        <img src="myImage.png" alt="" style='float:right;width:50px;'> 
        <p class=hyphenate>Xylometazoline 
        <p>This is a normal paragraph of text...</p> 
    </div> 
    
    +0

    는 매력처럼 일했습니다! 감사!! – SergioM

    0

    포장,하지만 것

    +0

    그냥 시도하고 동일한 효과를 얻을. 그것은 이미지 아래에 래핑합니다. 감사합니다 – SergioM

     관련 문제

    • 관련 문제 없음^_^