다음은 내 문제 의 jsfiddle 링크입니다.
HTML
<div class="Right green">
<h2>
<div class="number colorV"> 8.123456 </div>
<div id="text"> huh-fjiuetie</div>
</h2>
<div class="Right-after green-after"></div>
</div>
조건은 다음과 같습니다.
div안의 두 개 h2는 같은 줄에 있어야합니다..textDIV는 숫자 DIV의 내용에 기초하여 도착 잘림 (폭은 동적으로 생성 된 번호 DIV의 내용에 따라 고정 될 수 없다)어떤 제안이라도 주시면 감사하겠습니다.
이전 및 관련 질문을 기반으로 다음을 시도 할 수 있습니다.
다음과 같이 HTML을 수정하십시오.
<div class="Right green">
<div class="table-wrap">
<div class="text-cell">
<div class="inner">huh-fjiuetie</div>
</div>
<div class="number-cell colorV">8.123456</div>
</div>
<div class="Right-after green-after"></div>
</div>
그리고 다음 CSS를 적용하십시오.
body {margin: 0;} /* Note: learn about reset style sheets... */
/* The following takes care of the shadow/coloring/arrow styling */
.Right {
position: relative;
width: 80%;
margin-right: 50px;
margin-top: 4%;
}
.Right-after {
content:"";
position:absolute;
top: 0;
width: 0;
border-style: solid;
border-width: 3.3em 0 3.3em 3.3em;
right:-3.2em;
}
.colorV {
color:#dbdcde;
}
.green {
background: linear-gradient(to left, #1d9755, #005b26, #002000);
}
.green-after {
border-color: transparent transparent transparent #1d9755;
}
/* The following takes care of the test clipping */
.table-wrap {
display: table;
width: 100%;
height: 200px; /* this may be optional... */
font-size: 1.00em;
line-height: 1.50em;
font-size: 5.0em;
}
.number-cell {
display: table-cell;
}
.text-cell {
display: table-cell;
}
.inner {
height: 1.50em;
overflow: hidden;
word-break: break-all;
}
http://jsfiddle.net/audetwebdesign/uKryj/ 에서 데모를 참조하십시오.
CSS에는 두 부분이 있습니다.
관련 규칙 .Right및 .green녹색 그림자의 테이크 관리 및 모티브 화살표. 이것은 잘 정의 된 블록 레벨 컨테이너를 설정합니다.
div.Right블록은 하위 블록이 포함되어 .table-wrap앞부분과 같이 텍스트와 숫자를 포함하고 걸릴 것입니다, 클리핑의 위치 :
한 div의 텍스트가있는 동일한 행에있는 두 div가 두 번째 div의 너비를 기준으로 잘림
추가 자식 블록 .Right-after은 화살표 모티브를 생성합니다.
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다