Как добиваться, чтобы текст вышел в единственной линии в HTML?

У меня есть случай, где я хочу показать текст, который занимал бы всю ширину Вашего контейнера и не занимал больше единственной линии, но в случае, у которого были бы отделяющие символы линии, не показывайте линии последующие.

Я пробовал со следующим кодом в чистом CSS:

.line-container {
  width: 230px;
  height: 20px;
}
.single-line {
  width: 100%;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
Lorem ipsum dolor amet Lorem ipsum dolor amet Lorem ipsum dolor amet Lorem ipsum dolor amet Lorem ipsum dolor amet Lorem ipsum dolor amet Lorem ipsum dolor amet Lorem ipsum dolor amet Lorem ipsum dolor amet Lorem ipsum dolor amet

Это функционирует хорошо, но только, если нет символов возврата линии так как свойство white-space когда он кладется в nowrap удали разрывы линии. Другая возможная стоимость normal, pre, pre-wrap и pre-line они не были много помощи, так как текст не выходил тогда в 1 единственной линии.

Я прочитал также, что есть несколько способов интерпретировать присутствие новой линии с символами \r и \n (возврат линии и новой линии) в следующих соединениях:

What is the difference between \r and \n

https://es.wikipedia.org/wiki/Nueva_Línea

Я представляю, что, если я читаю текст базы данных или файла и получая с сервера это он может приносить мне много недостатков, если он был написан в различных операционных системах.

Какое-то решение существует в CSS, которого он не знал бы, или я должен использовать какой-то snippet javascript, чтобы создавать такой компонент как который показываю их?

11
задан 23.05.2017, 15:39
3 ответа

Наконец я добился того, что он хотел. Я не был должен использовать javascript, единственный CSS.

От этой формы я смог добиваться портативного решения для любой среды и невероятно согласно spec смоги функционировать даже в Internet Explorer 6.

Последуй, что свойство white-space когда он кладется в pre если он предохраняет разрывы линии, даже он имеет в виду, когда он встречается с элементом <br/> но создай этот любопытный эффект.

$(function() {
  var textoLargo = 'Lorem ipsum dolor amet ipsum dolor amet ipsum dolor amet ipsum dolor amet\r\n' +
    'ipsum dolor\r\n' +
    'amet Lorem ipsum dolor amet Lorem ipsum\n' +
    'dolor amet Lorem ipsum dolor amet Lorem ipsum dolor amet Lorem ipsum dolor amet\r' +
    'Lorem ipsum dolor amet Lorem ipsum dolor amet\n';
  $('#empty').html(textoLargo);
});
.line-container {
  width: 200px;
  height: 20px;
}
.single-line {
  width: 100%;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: pre;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h3>Probando distintos separadores</h3>
<div class="line-container">
  <div id="empty" class="single-line">
  </div>
</div>
<h3 style="margin-top: 100px">Usando elementos br como separadores</h3>
<div class="line-container">
  <div class="single-line">Lorem ipsum dolor amet Lorem ipsum dolor amet Lorem ipsum dolor amet
    <br/>Lorem ipsum
    <br/>Lorem ipsum dolor amet Lorem ipsum dolor amet Lorem ipsum dolor amet
    <br/>
  </div>
</div>

То, что он делает, состоит в том, чтобы создавать маленькие обрезанные фрагменты текста. Свойство text-overflow когда он кладется в ellipsis обрежь текст, который превосходит размер Вашего контейнера, поэтому необходимо использовать overflow: hidden; целиком со свойством white-space для того, чтобы он явился elípsis ... в случае, что текст был больше.

Прибывая там только я был должен применять к нему другой overflow: hidden; в контейнер и я заношу в список!

$(function() {
  var textoLargo = 'Lorem ipsum dolor amet Lorem ipsum dolor amet Lorem ipsum dolor amet\r\n' +
    'ipsum dolor amet Lorem ipsum dolor amet Lorem ipsum dolor\r\n' +
    'amet Lorem ipsum dolor amet Lorem ipsum\n' +
    'dolor amet Lorem ipsum dolor amet Lorem ipsum dolor amet Lorem ipsum dolor amet\r' +
    'Lorem ipsum dolor amet Lorem ipsum dolor amet\n';
  var primeraLineaCorta = 'Lorem ipsum dolor \r\n' +
    'ipsum dolor amet Lorem ipsum dolor amet Lorem ipsum dolor\r\n' +
    'amet Lorem ipsum dolor amet Lorem ipsum\n' +
    'dolor amet Lorem ipsum dolor amet Lorem ipsum dolor amet Lorem ipsum dolor amet\r' +
    'Lorem ipsum dolor amet Lorem ipsum dolor amet\n';
  $('#long').html(textoLargo);
  $('#short').html(primeraLineaCorta);
});
.line-container {
  width: 200px;
  height: 20px;
  overflow: hidden;
}
.single-line {
  width: 100%;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: pre;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
</script>
<h3>Probando distintos separadores</h3>
<div class="line-container">
  <div id="long" class="single-line">
  </div>
</div>
<h3 style="margin-top: 30px">Si el texto es mas pequeño</h3>
<div class="line-container">
  <div id="short" class="single-line">
  </div>
</div>
<h3 style="margin-top: 30px">Si se usa br como separador</h3>
<div class="line-container">
  <div id="short" class="single-line">Lorem ipsum dolor amet Lorem ipsum dolor amet Lorem ipsum dolor amet
    <br/>Lorem ipsum
    <br/>Lorem ipsum dolor amet Lorem ipsum dolor amet
    <br/>Lorem ipsum dolor amet Lorem ipsum dolor amet
    <br/>
  </div>
</div>
<h3 style="margin-top: 30px">Si se usa br y el texto es pequeño</h3>
<div class="line-container">
  <div id="short" class="single-line">Lorem ipsum dolor
    <br/>
  </div>
</div>

Только необходим использовать этот малыш snippet css, чтобы этого добиваться

.line-container {
    width: 200px;
    height: 20px;
    overflow: hidden;
}

.single-line {
    width: 100%;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: pre;
}

Заметь: Согласно документации свойства white-space это решение не функционирует, когда он только используется \r как разделитель. Согласно статье SO это одинокое применяется к самым старым Macs, что я думаю, что он достаточно приемлемый. Если это случай, было бы нужно заменять символы возврата \r из-за \n используя javascript, чтобы добиваться этого эффекта.

9
ответ дан 24.11.2019, 14:48

div у отца, который содержит div, который показывает текст, есть установленное средство, это не позволяет явитесь правильно текстом, удали класс .line-container

<style>
.single-line {
  width: 100%;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
</style>
<div class="line-container">
<div class="single-line" >Lorem
    ipsum dolor amet Lorem ipsum dolor amet Lorem ipsum dolor
    amet Lorem ipsum dolor amet Lorem ipsum 
    dolor amet Lorem ipsum dolor amet Lorem ipsum dolor amet Lorem ipsum dolor amet
  Lorem ipsum dolor amet Lorem ipsum dolor amet</div>
</div>

увидь онлайн пример aquГ -

прокомментировал Тебе tambiГ©n, что, если твой текст, ему удается иметь разрывы линии или возвраты линии, посредством Javascript podrГ-схвати выдавать эти не годные к печати символы, например:

var s = "Lorem \n  ipsum dolor amet Lorem ipsum dolor amet Lorem ipsum dolor \n amet Lorem ipsum dolor amet Lorem ipsum \n dolor amet Lorem ipsum dolor amet Lorem ipsum dolor amet Lorem\n ipsum dolor amet";

Используя этот regex и mГ©todo повторно нравься () ты можешь удалять разрывы lГ-nea и возвраты:

s = s.replace(/[\n\r]/g, '');
1
ответ дан 24.11.2019, 14:48
  • 1
    Я думаю, что ты идешь из-за хорошей дорожки. Я верю в то, что быть должным, и # 237; чтобы использовать javascript, чтобы манипулировать возвратами и quiz и # 225; s как sugiri и # 243; @Fakux использовать < br / и gt; но контейнер не может быть удаленным, так как это - то, чего я хочу добиться. Ограничивать tama и # 241; или контейнера, чтобы мочь видеть, как он ведет себя с различными tama и # 241; вы и тексты. То, что я пробую, что-то как система извещений SOes если только там может быть любой тип содержимого, из-за которого soluci и # 243; n должен быть геном и # 233; богатая. Которое s и # 233; до настоящего времени дело в том, что контейнер tendr и # 225; tama и # 241; или я закрепляю и нужно показывать continuaci и # 243; n текста с тремя точками – devconcept 26.02.2016, 19:15

Ты был бы должен добавлять один "<br/>", где queres, что сделал разрыв линии

, Мотив состоит в том, что html не интерпретирую "enter" разрывом линии =)

0
ответ дан 24.11.2019, 14:48
  • 1
    Я использую faker.js , чтобы производить мои данные и этот librer и # 237; в , если производит текст с разрывами l и # 237; nea. Твой ответ понимает, что я пишу html вручную, и если например данные приходят из базы данных этот soluci и # 243; n как est и # 225; уже не возможно. – devconcept 26.02.2016, 18:21
  • 2
    1) Если ты используешь faker.js, определи это в твоем вопросе. 2) В базе данных обрежь сохранять один и #39; < br \и gt; и #39; в поле типа varchar. 3) я не понимаю, что он что queres делать, но ты в любом случае был бы должен изменять ширину твоего width для того, чтобы только alcanze для paralabra. – Fakux 26.02.2016, 18:40
  • 3
    Факт, что est и # 233; используя faker.js у него нет значимости, так как eventualmante это существо и # 225; удаленный из aplicaci и # 243; n и проблема в и # 250; n сохраняться и # 225;. Другой soluci и # 243; n также она не является хорошей, так как, если ты наполняешь формуляр с одним textarea например то, что посылать тебе, и # 225; это возврат l и # 237; nea и изменять целый api, чтобы манипулировать этой возможностью мне кажется soluci и # 243; n слишком крайняя. Должен быть soluci и # 243; n много м и # 225; s простая. – devconcept 26.02.2016, 18:55

Теги

Похожие вопросы