다음과 같은 문제가 있습니다.
내가 쓴 텍스트가 DIV를 그리워 할 때 불쾌한 곳에서 깨지는 경우 어떻게 깨뜨릴 곳에서 설정합니까?
긴 텍스트 : 테스트 : Hello My Name Is Tim4497
그러나 "Test :"후에 중단되므로 아래와 같이 보입니다.
테스트:
안녕 내 이름은 티
다음과 같이 만드는 방법을 알고 있습니까?
테스트 : Hello My Name
Tim4497입니다.
줄 바꿈 후에는 "Test :"뒤에 줄을서야합니다.
또한 여러 줄로 나뉘는 경우 줄 간격이 동일해야합니다.
지금까지 이것은 내가 가진 것이지만 내가 원하는 것을하지 않습니다.
HTML 코드 :
<div>
<span class="user_name" style="color:#FF7000">Test</span>
": "
<span class="user_message">Hello my name ist Tim and my english is terrible.</span>
</div>
JS 또는 Html / CSS로이 문제를 해결하는 방법은 무엇입니까?
감사합니다 :),
팀 4497
이를 수행하는 방법에는 여러 가지가 있습니다. 아마도 가장 깨끗한 방법 중 하나는 css table및 table-cell. 이렇게하면 요소가 완벽하게 나란히 배치됩니다.
래퍼 div a display: table와 스팬을 만드십시오 display: table-cell. (더 나은 시각적 효과를 위해 ":"을 범위 안에 넣는 것을 잊지 마십시오.)
<div class="wrapper">
<span class="user_name" style="color:#FF7000">Test</span>
<span>:</span>
<span class="user_message">Hello my name ist Tim and my english is terrible.</span>
</div>
CSS :
.wrapper {
display: table;
}
.wrapper span {
display: table-cell;
}
http://jsfiddle.net/jy7d431p/1/- 화면 크기를 조정하고 너비를 마지막 범위로 설정합니다.
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다