화면 크기에 따라 HTML 줄을 끊는 방법

jQuery 모바일 레이아웃을 사용하여 정렬되지 않은 목록을 표시하는 PhoneGap 앱이 있습니다. 작은 화면에서 앱을 볼 때 텍스트가 겹치고 더 이상 읽을 수 없습니다. 나는 화면 크기를 줄이면 두 줄로, 줄이지 않을 때는 한 줄로 "줄 바꿈"하는 방법을 알아낼 수 없습니다.화면 크기에 따라 HTML 줄을 끊는 방법

전체 화면의 텍스트가 사라 두 번째 줄에 Full screen

감소 화면 Reduced screen

, 그리고 숫자 값을 기준으로 "숨겨진"입니다.

HTML :

<div data-role="content"> 
     <ul data-role="listview" data-divider-theme="a"> 
      <li data-role="list-divider"></li> 

      <li><b>Revenues</b></li> 
      <li>Gross Sales<span class="right">$543,600</span></li> 
      <li>Less Sales Returned and Allowances<span class="right">$9,200</span></li> 
      <li>Less Sales Discounts<span class="right">$5,100</span></li>

(에 계속)

CSS : 작은 화면에 대한

span.right { 
    float: right; 
}

출처

2014-07-08 user3413170

HTML + CSS를 게시하십시오. – Dai

게시 된 코드는 이미지에 렌더링을 생성하지 * 않습니다. 줄임표로 표시된 잘림을 유발하는 설정이 있습니다. –

이미지를 생성하기 위해 JQuery 모바일의 CSS와 자바 스크립트를 사용했습니다. 일반적인 형식의 결과물입니다. – user3413170

그래서 당신은 사용할 수 있습니다.

출처

2014-07-11 04:04:06 user3413170

스팬 때문에 아래의 CSS를 사용하시기 바랍니다 덩어리의 코드는 다음과 같습니다 다음 줄이 자동으로 입력됩니다.

@media only screen and (max-device-width: 480px) { 
    span.right { 
    display:block; 
    text-align:right; 
    clear:both; 
} 
}

출처

2014-07-08 18:44:50 codeee

이것은 항목을 한 줄 아래로 가져 왔으며 더 작은 화면 크기에서는 "더 적은 매출이 반환되었습니다"줄이 여전히 숨겨져 있습니다. – user3413170

이것은 table의 일이다 : 당신이 정말로 바로 오른쪽에 위치 수치를 원하는 경우

<!doctype html> 
<title>Table demo</title> 
<style> 
td:nth-child(2) { text-align: right } 
</style> 
<table><caption>Revenues</caption> 
    <tr><td>Gross Sales <td>$543,600 
    <tr><td>Less Sales Returned and Allowances <td>$9,200 
    <tr><td>Less Sales Discounts <td>$5,100 
</table>

, 당신은 CSS 규칙 table { width: 100% }을 추가 할 수 있지만 프레젠테이션이 훨씬 더 읽을 것이없는 것입니다. 나는 그것이 될 JQuery와 모바일로 "텍스트 줄 바꿈"하지 않습니다! 중요 태그없이 white-space: normal;을 사용했다

white-space: normal !important;

출처

2014-07-08 18:52:46

이것은 기능면에서 효과가 있지만 목록으로 처리 할 방법이 없습니까? (서식 변경) – user3413170

화면 크기에 따라 HTML 줄을 끊는 방법

답변

관련 문제