Question

我正在使用Bootstrap并尝试在td的{{1}}元素中禁用自动换行。我已将table应用于white-space: nowrap元素，该元素会按预期禁用自动换行，但现在td本身将超出其所在的列。所以，这个CSS似乎只是破坏了引导程序。

我现在想使用table，因此使用省略号会截断任何可能被文字包装的文本。我似乎无法将这个CSS应用于任何东西并让它工作。无论我在哪里应用它，似乎都没有发生。该表总是扩展到所需的网格列之外。

如何在text-overflow: ellipsis元素内禁用自动换行，并使用省略号截断文本，而不会破坏网格？

Answer 1

这篇文章Fluid table with td nowrap & text-overflow?中的一个技巧很有效：

在text-overflow: ellipsis; white-space: nowrap; overflow: hidden; width: 0; min-width: 100%;中放置一个div来包含文本，然后使用：

设置div的样式

<div class="container">
  <div class="row">
    <div class="col-md-12">
      <table class="table table-striped">
      <thead> 
        <tr> 
          <th>#</th> 
          <th>First Name</th> 
          <th>Last Name</th> 
          <th>Username</th> 
        </tr> 
      </thead> 
      <tbody> 
        <tr> 
          <th scope="row">1</th> 
          <td>
            <div style= "text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
width: 0;
min-width: 100%;">
              Mark really long text that need to be wrapped ywey yd syd ysd syd skd ysyd sad ysd syjdk skjdy sjd hdhjd hjd hjd hjds hjds dhj dsjhds js hs jsd hjsdhs dhs djs 
            </div>

           </td> 
           <td>Otto</td> 
           <td>@mdo</td> 
         </tr>
       </tbody> 
      </table>
    </div>
  </div>
</div>

表格如下：

<?php
   require("cscie12/final    project/PHPMailer/PHPMailer_5.2.0/class.PHPMailer.php");

$mail = new PHPMailer();

$mail->IsSMTP();                                      // set mailer to use SMTP
$mail->Host = "ssrs.reachmail.net";  // specify main and backup server
$mail->Port = "25";
$mail->SMTPAuth = plain;     // turn on SMTP authentication
$mail->Username = "BRYANSAY\bryan";  // SMTP username
$mail->Password = "***********"; // SMTP password

$mail->From = "bryan@reachmail.com";
$mail->FromName = "Contact Form";
$mail->AddAddress("bryan.sayles@hotmail.com", "Bryan Sayles");

$mail->WordWrap = 50;                                 // set word wrap to 50 characters
$mail->AddAttachment("/var/tmp/file.tar.gz");         // add attachments
$mail->AddAttachment("/tmp/image.jpg", "new.jpg");    // optional name
$mail->IsHTML(true);                                  // set email format to HTML

$mail->Subject = "Contact Form";
$mail->Body    = "This is the HTML message body <b>in bold!</b>";
$mail->AltBody = "This is the body in plain text for non-HTML mail clients";

if(!$mail->Send())
{
   echo "Message could not be sent. <p>";
   echo "Mailer Error: " . $mail->ErrorInfo;
   exit;
}
}
echo "Message has been sent";
?>

使用twitter bootstrap，我怎样才能使它在没有打破列的情况下在表中没有自动换行？

1 个答案: