Как сделать что бы текст не переносился?

130

11 июля 2019, 15:30

есть простой тестовый блок. Который имеет width 0 но при клике добавление класса у него появляется width 40%. Т.е на подобие плавное появление блока и за ширины( блок прикреплен к левой части) И все бы хорошо но когда нужно скрыть блок, видно что тест и за того что место мало, начинает сжиматься. Можно как то это предотвратить

Answer 1

Похоже, меня не услышали. Вам нужен white-space:nowrap

$("input").on("input", (e) => { 
  $(".parent").css("width", $(e.target).val() * 2 + "px") 
});

.parent { 
  overflow: hidden; 
  background:red; 
  width:40px; 
} 
 
.child { 
  white-space:nowrap; 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
 
 
 
<div class="parent"> 
  <div class="child"> 
    Lorem ipsum dolor sit amet, consectetur adipisicing elit.  
    Tenetur, deserunt! 
  </div> 
</div> 
 
<input type="range" value=20>

Answer 2

Да, можно. Нужно текст поместить в отдельный блок, а сжимать родительский. При этом ширину дочернего элемента нужно задать жестко.

HTML

<div class="parent">
  <div class="child">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. 
    Tenetur, deserunt!
  </div>
</div>

CSS

@keyframes roll-in {
  0% {
    width: 0;
  }
  50% {
    width: 100%;
  }
  100% {
    width: 0;
  }
}
.parent {
  overflow: hidden;
  animation: roll-in 2s linear;
  animation-iteration-count: infinite;
}
.child {
  width: 300px;
}

jsfiddle

Answer 3

Ещё как вариант, смещать блок а не уменьшать. Но текст, должен быть обвёрнут в свой узел.

function spoler(_e){ 
	if(_e == window){ 
		spoler(_e.event.target || _e.event.srcElement) 
	} 
	else if(_e.getAttribute("class")){ 
		_e.removeAttribute("class") 
	} 
	else{ 
		_e.setAttribute("class", "close") 
	} 
}

DIV { 
	position: relative;	 
	border: #4a4a4a 3px solid;	 
	overflow: hidden; 
	width: 100%; 
} 
DIV SPAN { 
	zoom:1; z-index: 1; position: relative; display:-moz-inline-stack; display: inline-block; //display: inline; vertical-align: middle; width: 100%; 
} 
DIV.close { 
	left: -60%; 
} 
DIV.close SPAN{ 
	margin-left: 60%; 
}

 <div onclick="spoler(this)"><span>есть простой тестовый блок. Который имеет width 0 но при клике добавление класса у него появляется width 40%. Т.е на подобие плавное появление блока и за ширины( блок прикреплен к левой части) И все бы хорошо но когда нужно скрыть блок, видно что тест и за того что место мало, начинает сжиматься. Можно как то это предотвратить</span> 
  <span>следующий текстовый блок</span> 
  </div> 
  <div onclick="spoler(this)"><span>есть простой тестовый блок. Который имеет width 0 но при клике добавление класса у него появляется width 40%. Т.е на подобие плавное появление блока и за ширины( блок прикреплен к левой части) И все бы хорошо но когда нужно скрыть блок, видно что тест и за того что место мало, начинает сжиматься. Можно как то это предотвратить</span></div>