更新

Question

我有几个大句子我需要拆分并显示两行，但句子来自服务器我无法使用 br 标签或其他标签，现在句子只显示一半另一半不显示。

.TextBox {
    width: 96%;
    height: 25px;
    border: none;
    padding: 0px 2%;
    font-size: 17px;
    color: #555;
    max-width:200ch;
    word-wrap:break-word;
}

Answer 1

更新

添加了 display:table ，这是最干净的解决方案。请参阅更新的演示。

<小时/> 通过CSS包装文本，您可以尝试3个属性。

white-space，word-break，和 word-wrap

演示中的详细信息

演示

p {
  width: 100px;
  border: 1px solid red;
}

.whiteSpace-Nowrap {
  white-space: nowrap;
}

.whiteSpace-Normal {
  white-space: normal;
}

.wordBreak-BreakAll {
  word-break: break-all;
}

.displayTable {
  display: table
}

<!DOCTYPE html>
<html>

<head>

</head>

<body>

  <h5>{white-space: nowrap}</h5>
  <p class='whiteSpace-Nowrap'>You might have <code>white-space:nowrap</code> which makes text ignore the border and continue going.</p>

  <h5>{white-space: normal} or {word-break: normal} or {word-wrap: normal}</h5>
  <p class='whiteSpace-Normal'>will make text wrap normally at the spaces between spaces. But if there's a long word like: supercalifragilisticexpialidocious that exceeds the width of it's container, it will only wrap at a hyphen. Sup-er-cal-i-fra-gil-is-tic-ex-pi-al-i-do-cious</p>
  <hr>
  <p style='border:0;width:100%;'>If you are having problems with long words, then you can use hyphens like the previous example, or try the following:</p>

  <h5>{word-break: break-all} or {word-wrap: break-word}</h5>
  <p class="wordBreak-BreakAll">breaks between any letters. It doesn't care where. So a word like: pneumonoultramicroscopicsilicovolcanoconiosis is chopped up and served in a thousand pieces.</p>
  <hr>

  <h5>{display:table}</h5>

  <p class='displayTable'>behaves like a &lt;table&gt; so text will wrap and the container will expand vertically once text has reached it's limit horizontally.</p>

  <p style='border:0;width:100%;'>The paragraph above and below have identical properties. The only difference between them is that the bottom paragraph has a long unbreakable word.</p>

  <p class='displayTable'>A long word like: Antidisestablishmentarianism will not break out of the border. Instead, it will accommodate that unbreakable word by expanding.</p>
</body>

</html>

Answer 2

您可以尝试添加`word-wrap：break-word;' ，'word-break：hyphenate;'

.wrapper {
  padding: 20px;
  background: #eaeaea;
  max-width: 400px;
  margin: 50px auto;
}
  
.demo-1 {
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}

.demo-2 {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  max-width: 150px;
}

<div class="wrapper">
  <p class="demo-1">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ut odio temporibus voluptas error distinctio hic quae corrupti vero doloribus optio! Inventore ex quaerat modi blanditiis soluta maiores illum, ab velit.</p>
</div>

<div class="wrapper">
  <p class="demo-2">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ut odio temporibus voluptas error distinctio hic quae corrupti vero doloribus optio! Inventore ex quaerat modi blanditiis soluta maiores illum, ab velit.</p>
</div>

Answer 3

使用输入字段显示html。输入字段只有一行（示例1）。如果你想使用多行，只需使用textarea（例2）。

示例1：

<input id="idSeqQue" type="text" readonly name="firstname" data-role="none" class="TextBox" placeholder="Given" value="Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet." />

.TextBox {
    width: 96%;
    height: 100px;
    border: none;
    padding: 0px 2%;
    font-size: 17px;
    color: #555;
    max-width:200ch;
    word-wrap:break-word;
}

示例2：

<textarea id="idSeqQue" type="text" cols="10" readonly name="firstname" data-role="none" class="TextBox" placeholder="Given">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet."</textarea>

{{1}}

使用css将句子分成两半并在文本字段中显示

3 个答案:

更新

演示